如何扩展ExtJs组件?

时间:2013-10-07 10:32:54

标签: javascript extjs

我想扩展一个Ext.from.FormPanel,它包含Grid和一些按钮。我找到了Saki的例子:

Ext.ns('MyApp');

MyApp.AbstractFormPanel = Ext.extend(Ext.form.FormPanel, {
 defaultType:'textfield'
,frame:true
,width:300
,height:200
,labelWidth:75
,submitUrl:null
,submitT:'Submit'
,cancelT:'Cancel'
,initComponent:function() {

    // create config object
    var config = {
        defaults:{anchor:'-10'}
    };

    // build config
    this.buildConfig(config);

    // apply config
    Ext.apply(this, Ext.apply(this.initialConfig, config));

    // call parent
    MyApp.AbstractFormPanel.superclass.initComponent.call(this);

} // eo function initComponent

,buildConfig:function(config) {
    this.buildButtons(config);
} // eo function buildConfig

,buildButtons:function(config) {
    config.buttons = [{
         text:this.submitT
        ,scope:this
        ,handler:this.onSubmit
        ,iconCls:'icon-disk'
    },{
         text:this.cancelT
        ,scope:this
        ,handler:this.onCancel
        ,iconCls:'icon-undo'
    }];
}

,onSubmit:function() {
    Ext.MessageBox.alert('Submit', this.submitUrl);
} 

,onCancel:function() {
    this.el.mask('This form is canceled');
} // eo function onCancel

}); // eo extend

它可能包含尽可能多的按钮,我会给它。但是如何添加网格?我会像这样在initConmponent放置网格吗?

initComponent:function() {

    // create config object
    var config = {
        defaults:{anchor:'-10'}
    };

    // build config
    this.buildConfig(config);

    // apply config
    Ext.apply(this, Ext.apply(this.initialConfig, config));

    // call parent
    MyApp.AbstractFormPanel.superclass.initComponent.call(this);

   mygrid = new Ext.grid.GridPanel({....});

}

我可以在哪里找到好的例子或教程? PS:ExtJs版本3.4。

1 个答案:

答案 0 :(得分:0)

网格适合项目块中的表单容器。 Saki在窗口中有一个example网格。 http://examples.extjs.eu/one2many.html 在其中,您可以看到窗口组件包含items数组。并且网格是该数组中的项目。

您需要做的是让表单面板声明items数组,其中一个项目是网格。