Define a reusable component

1-I used following code to define a reusable grid, but when I make instance, no config in class definition either do not have effect of break the code. What is the reason? 3- Is there any restriction in class config declaration? 2- How I can make some default columns in grid class and add some more columns to its objects? Thanks

    Ext.define("IBS.users.Grid", {
    extend: "Ext.grid.Panel",
    config:{
        selType:'checkboxmodel',        //not work
         dockedItems:[/* items */],      //break
        multiSelect:true,
        features: [
            {
                groupHea开发者_开发技巧derTpl: '{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-I used following code to define a reusable grid, but when I make instance, no config in class definition either do not have effect of break the code. What is the reason?

I can answer why your config doesn't have effect. Because config which is being passed into cunstructor is not your default config. You have to apply your default config in order to make default config to have effect:

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

However, I don't know why dockedItems:[/* items */] breaks the code. Maybe you have syntax or logical errors somewhere within /* items */.

2- How I can make some default columns in grid class and add some more columns to its objects?

That is easy. Just override your initComponent function:

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- Is there any restriction in class config declaration?

I'm not aware of any. However, I wouldn't recommend to declare object configs in class definition. For example:

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

It will be ok with first instance of the class. But when you create the second instance it's bbar refers to the same object as the first instance. And therefore bbar will disappear from the first grid.
Instead declare object configs in initComponent.