PDA

View Full Version : config property setting in GridPanel constructor



dotskeshav
24 Sep 2014, 3:55 AM
What is the difference between these two code snippet or which one is wrong/Invalid. Kindly note that all other namespace things are correct as far as you concern, It would be very helpful if someone make a working fiddle for the same


1) using Ext.apply in constructor



var BookGrid = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {
var config = {} || config;
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
]
});
var columnModel = new Ext.grid.ColumnModel({
defaults:{
sortable:true
},
columns:[
{
header: 'Name',
dataIndex: 'company'
}, {
header: 'Price',
dataIndex: 'price'
}
]
});
var cview = new Ext.grid.GridView({
autoFill: true,
forceFit: true,
emptyText: 'no book'
});


Ext.apply(config, {
allowNoSelection: true,
forceFit: true,
title: 'Please Select ...',
layout: 'fit',
reader: reader,
width: 300,
height: 200,
store: ds,
cm: columnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
view: cview,
});
BookGrid.superclass.constructor.call(this, config);
}
});


Ext.extend(BookGrid, Ext.Window,{
show : function()
{
if(!this.rendered)
{
this.render(Ext.getBody());
}
BookGrid.superclass.show.call(this);
}
});

I also notice that `Ext.apply(config , {..})` and `Ext.apply({...},config)` has two different meanings. which one is correct

2) adding property in config using .


var BookGrid = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {
var config = {} || config;
config.title = "Please Select";
config.layout='fit';
config.autoScroll=true;
config.split=true;
config.frame=true;
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
]
});
config.store = ds;
config.sm = new Ext.grid.RowSelectionModel({singleSelect:true});


var columnModel = new Ext.grid.ColumnModel({
defaults:{
sortable:true
},
columns:[
{
header: 'Name',
dataIndex: 'company'
}, {
header: 'Price',
dataIndex: 'price'
}
]
});
config.cm=columnModel;
config.view = new Ext.grid.GridView({
autoFill: true,
forceFit: true,
emptyText: 'no address book'
});

BookGrid.superclass.constructor.call(this, config);
},
show : function()
{
if(!this.rendered)
{
this.render(Ext.getBody());
}


BookGrid.superclass.show.call(this);
}

});

slemmon
14 Oct 2014, 3:00 AM
I would use apply() or applyIf() in the constructor. Apply() will set the properties from the second param on the object that is the first param. So, in this example:



var cfg = {};
Ext.apply(cfg, {
foo: 'bar'
});


the cfg object will now have foo: 'bar' as a property / value.

ApplyIf will only push the property to the receiving object if that object does not already have that property.



var cfg = {
foo: 'bar'
};
Ext.apply(cfg, {
foo: 'baz'
});


In this example cfg's foo property will still be 'bar'. It didn't get 'baz' since it already had a foo property when applyIf() was executed.