Customize a reusable child item depending on which component creates it

Many ways, this is the one i would use:

Code:

//this is where your reusable component is defined
Ext.define('MyReusableFormGridComponent', {
   xtype: 'myreusableformgridcomponent',
 
   initComponent: function(){
      items = [{
        xtype: 'form', 
        ..... //here somewhere are all definitions of form
       },{
        xtype: 'grid', 
        ....//all other definitions
        columns: grid_columns_passed_in_consturctor  
      }];
      this.callParent(arguments);
   }
});

//this is how you make several instance of your reusable component, but with different grid columns:

Code:

var cmp1 = Ext.create({
 xtype: 'myreusableformgridcomponent',
 grid_columns_passed_in_consturctor:  [{ text: 'Column1',  dataIndex: 'col1' },{ text: 'Column2',  dataIndex: 'col2' },{ text: 'Column3',  dataIndex: 'col3' }]
});


var cmp2 = Ext.create({
 xtype: 'myreusableformgridcomponent',
 grid_columns_passed_in_consturctor:  [{ text: 'Column4',  dataIndex: 'col4' },{ text: 'Column5',  dataIndex: 'col5' },{ text: 'Column6',  dataIndex: 'col6' }]
});


var cmp2 = Ext.create({
 xtype: 'myreusableformgridcomponent',
 grid_columns_passed_in_consturctor:  [{ text: 'Column7',  dataIndex: 'col7' },{ text: 'Column8',  dataIndex: 'col8' },{ text: 'Column9',  dataIndex: 'col9' }]
});

please tell us how did it go.

andrej

Customize a reusable child item depending on which component creates it