PDA

View Full Version : What is the right way for conditional config in a class?



Jan Sepke
19 Mar 2014, 6:13 AM
Hello,

I want to define a Grid with some conditional defaults like:
editable, rownumbers and paging which will set some config options if enabled.

Where and how should I do this? constructor, initComponent, initComponent ? here is what I have and what is working but seems really ugly:



Ext.define('DriveExpert.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.DriveExpert.Grid',
constructor: function (config) {
if (config.columns === undefined) {
config.columns = {};
}
if (config.columns.items === undefined) {
config.columns.items = {};
}
if (config.columns.defaults === undefined) {
config.columns.defaults = {};
}
if (config.columns.defaults.sortable === undefined) {
config.columns.defaults.sortable = true;
}
if (config.plugins === undefined) {
config.plugins = [];
}
if (config.tbar === undefined) {
config.tbar = [];
}
if (config.viewConfig === undefined) {
config.viewConfig = {};
}
if (config.viewConfig.enableTextSelection === undefined) {
config.viewConfig.enableTextSelection = true;
}
if (config.editable === true) {
config.plugins.push({
ptype: 'rowediting',
clicksToEdit: 2,
clicksToMoveEditor: 1
});
config.selType = 'checkboxmodel';
config.tbar.push({
xtype: 'button',
text: 'Add new ' + Ext.getStore(config.store).model.displayName,
iconCls: 'nde-fam-add',
handler: this.onAddClick
}, {
xtype: 'button',
text: 'Edit ' + Ext.getStore(config.store).model.displayName,
iconCls: 'nde-fam-pencil',
handler: this.onEditClick
}, {
xtype: 'button',
text: 'Delete ' + Ext.getStore(config.store).model.displayName,
iconCls: 'nde-fam-cross',
handler: this.onDeleteClick
});
}
if (config.rownumbers) {
config.columns.items.splice(0, 0, { xtype: 'rownumberer', width: 40, text: '#' });
}
if (config.paging) {
var pagingBar = {
xtype: 'pagingtoolbar',
store: config.store,
displayInfo: true
};
if (config.bbar === undefined) {
config.bbar = pagingBar;
} else {
config.bbar.push(pagingBar);
}
}


this.callParent(arguments);
},
listeners: {
resize: function (gridView, width, height, oldWidth, oldHeight, eOpts) {
//snip
},
onEditClick: function (button) {
//snip
},
onAddClick: function (button) {
//snip
},
onDeleteClick: function (button) {
//snip
}
});


I do nothing else then a recursive merge of the given config and the default values, I tried setting default values into an extra config node and then calling initConfig but this doesn't seem to be recursive?