PDA

View Full Version : Extended JsonStore Does Not Bind



joevelardi
4 Jan 2014, 4:29 AM
I have extended my JsonStore and in doing so, it does not bind to my ItemSelector.

Below is a sample of the constructor for the Available Distributors. Similar code is used for Selected Distributors.

Json Data Store


// Available Distributors.
AAA.DistributorsAvailable = Ext.extend(Ext.data.JsonStore, {
constructor : function(config) {
Ext.apply(this, {
url : 'data/admin/vendor/GetDistributorList.json',
fields : [ { name : 'DistributorID',
mapping : 'id'
},{ name : 'DistributorName',
mapping : 'displayName'
} ],
baseParams : { isDistributor : false
},
sortInfo : { field : 'DistributorName',
direction : 'ASC'
},
autoLoad : false,
remoteSort : false
});

AAA.DistributorsAvailable.superclass.constructor.apply(this, arguments);
}
});


Item Selector


AAA.ItemSelector = Ext.extend(Ext.Panel, {

initComponent: function() {

this.width = 270;
this.height = 380;

this.itemSelector = new Ext.ux.form.ItemSelector({
imagePath : 'library/ux/images/',
multiselects: [ { width : this.width,
height : this.height,
store : this.availableStore,
legend : this.availableLabel,
displayField : this.itemDisplay,
valueField : this.itemValue
},{ width : this.width,
height : this.height,
store : this.selectedStore,
legend : this.selectedLabel,
displayField : this.itemDisplay,
valueField : this.itemDisplay
} ]
});

var config = {
frame : true,
layout : 'fit',
bodyStyle : 'padding:5px',
items : [ this.itemSelector ]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

AAA.ItemSelector.superclass.initComponent.apply(this, arguments);
}
,onRender : function() {
AAA.ItemSelector.superclass.onRender.apply(this, arguments);
}

});


Window


AAA.Window = Ext.extend(Ext.Window, {

initComponent: function() {

var config = {
width : 600,
height : 500,
closable : false,
bodyStyle : 'padding:0px',
layout : 'fit',
modal : true,
resizable : false,
draggable : false,
items : [ ],
buttons : [ { text : bundle.getMsg('common.button.save'),
iconCls : 'save',
handler : this.onSave
},{ text : bundle.getMsg('common.button.cancel'),
iconCls : 'cancel',
handler : function () { Ext.WindowMgr.getActive().destroy(); }
} ]

};

Ext.apply(this, Ext.apply(this.initialConfig, config));

AAA.Window.superclass.initComponent.apply(this, arguments);
}
,onRender : function() {
AAA.Window.superclass.onRender.apply(this, arguments);
}
,onSave : function() {
AAA.Window.superclass.onSave.apply(this, arguments);
}
});


I have a function which wraps these components together ...



function manageDistributors() {

// Distributor Data Stores.
var dsDistributorsAvailable = new AAA.DistributorsAvailable;
var dsDistributorsSelected = new AAA.DistributorsSelected;

// Distributor List.
var distributorSelector = new AAA.ItemSelector({
availableStore : dsDistributorsAvailable,
selectedStore : dsDistributorsSelected,
availableLabel : bundle.getMsg('labelAvailableDistributors'),
selectedLabel : bundle.getMsg('labelSelectedDistributors'),
itemDisplay : 'DistributorName',
itemValue : 'DistributorID',
height : 410
});

dsDistributorsAvailable.load();
dsDistributorsSelected.load();

// Vendor Window.
var winDistributors = new AAA.Window({
title : bundle.getMsg('labelEditDistributors'),
iconCls : 'groupEdit',
onSave : function() { SetDistributorList(dsDistributorsSelected) }
});

winDistributors.add(distributorSelector);
winDistributors.doLayout();

winDistributors.show();

}



Assistance would be appreciated as to why the JsonData store does not bind. I can see the load() method for the Available and Selected Distributors in the console but somehow they are not binding to the Item Selector.

47423

slemmon
13 Jan 2014, 2:31 PM
Try doing:


Ext.apply(config, {


instead of



Ext.apply(this, {


in your store's constructor.

2ko