定义可重用的组件

时间:2011-08-04 07:49:34

标签: extjs4

1-I我使用以下代码来定义可重用的网格,  但是当我创建实例时,类定义中的配置都没有破坏代码的效果。是什么原因?  3-类配置声明是否有任何限制?  2-如何在网格类中创建一些默认列并为其对象添加更多列?  感谢

    Ext.define("IBS.users.Grid", {
    extend: "Ext.grid.Panel",
    config:{
        selType:'checkboxmodel',        //not work
         dockedItems:[/* items */],      //break
        multiSelect:true,
        features: [
            {
                groupHeaderTpl: '{name}',
                ftype: 'groupingsummary'
            },
            {
                ftype:'filters',
                encode: false, // json encode the filter query
                local: true
            }
        ],

         viewConfig: {      //not work
             stripeRows: true,
            filterable:true,
            loadMask: false
        },
        listeners : {
            itemdblclick: function(dv, record, item, index, e) {
                console.log(arguments);
            }
        }
    },
    constructor:function(config) {
        this.callParent(arguments);
        this.initConfig(config);
   //        this.self.instanceCount++;
    }
 }); 

1 个答案:

答案 0 :(得分:0)

  

1 - 我使用以下代码来定义可重用的网格,但是当我创建实例时,类定义中的配置都没有破坏代码的效果。是什么原因?

我可以回答为什么你的配置没有效果。因为传递给构造函数config不是您的默认配置。您必须应用默认配置才能使默认配置生效:

constructor:function(config) {
  config = Ext.applyIf(config, this.config);
  this.callParent(arguments);
  this.initConfig(config);
}

但是,我不知道为什么dockedItems:[/* items */]会破坏代码。也许你在/* items */内的语法或逻辑错误。

  

2-如何在网格类中创建一些默认列并添加更多列   列到其对象?

这很容易。只需覆盖initComponent函数:

Ext.define("IBS.users.Grid", {
  extend: "Ext.grid.Panel",
  // ...
  initComponent : function(){
    if (!this.columns) {
      // default columns:
      this.columns = [{
        dataIndex: 'dkjgkjd',
        // ...
      }];
      // if we passed extraColumns config
      if (this.extraColumns)
        for (var i=0; i < this.extraColumns.length; i++)
          this.columns.push(this.extraColumns[i]);
    }

    this.callParent(arguments);
  },
  // ...
});
  

3-类配置声明是否有任何限制?

我不知道。但是,我不建议在类定义中声明 object 配置。例如:

Ext.define("IBS.users.Grid", {
  extend: "Ext.grid.Panel",
  bbar: Ext.create('Ext.toolbar.Toolbar', // ...
  // ...
});

对于该类的第一个实例,它将是正常的。但是当你创建第二个实例时,它的bbar引用与第一个实例相同的对象。因此bbar将从第一个网格中消失 而是在initComponent中声明对象配置。