1

次のように定義された ExtJS4 クラスを作成しました。

    Ext.define('Ext.ux.PictureBox', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.picturebox',    
        url: "",   

        afterRender: function () {
            this.callParent();
            this.imageEl = Ext.DomHelper.append(this.body, Ext.String.format("<img style='width:{0}px;height:{1}px' src='{2}' />", this.width, this.height, this.url), true);

       this.items.items[0].addCls('browse-picture-button');
       this.items.items[1].addCls('remove-picture-button');    

        },

     initComponent: function() {

     var conf = {
        items:[
        {
          itemid: 'browseBtn',
          xtype: 'fileuploadfield',
          name: 'photo',
            buttonText: '...',
            buttonOnly: true,
          text: '...',    
            width: 30,
            height: 20
        },

         {
         itemid: 'removeBtn',
         xtype: 'button',
         text: 'X',
             width: 30,
             height: 20
         }        
        ]       
    };        

     Ext.apply(this, Ext.apply(this.initialConfig, conf));
     this.callParent(arguments);     
        },

 setSize: function (w, h) {
        this.callParent();
        if (this.imageEl) {
            this.imageEl.setSize(w, h);
        }
    },
 setUrl: function (url) {
        this.url = url;
        if (this.rendered) {
            this.imageEl.dom.src = url;
        }
    }
});

次に、このクラスを作成します。

Ext.create('Ext.ux.PictureBox', {   
    width: 300,
    height: 300,       
    url: 'http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg',
    renderTo: Ext.getBody()
});​

そして、スクリプトは未定義のメソッド「createChild」を呼び出すことができませんというエラーをスローします。なんで ？

fileuploadfield の代わりに 'button を使用すると、すべて正常に動作します。

Yuo はhttp://jsfiddle.net/C3HEu/12/でこの例を見て実行できます。

4

1 に答える 1

0

内で実行するには、すべての Ext コードが必要ですExt.onReady()。http://jsfiddle.net/C3HEu/22/

または、Ext を のonDomReady代わりにブラウザのイベントで実行するようにしonLoadます。http://jsfiddle.net/C3HEu/24/

于 2013-02-15T11:50:10.213 に答える