Code:
Ext.define('TestModel', {
extend: 'Ext.data.Model',
fields: [
{ "name": "id", "type": "int" }
,{ "name": "name", "type": "string" }
,{ "name": "type", "type": "string" }
,{ "name": "castatus", "type": "string" }
,{ "name": "nystatus", "type": "string" }
,{ "name": "caexpire", "type": "date" }
,{ "name": "nyexpire", "type": "date" }
]
});
Ext.define('TestStore',{
extend: 'Ext.data.Store'
,alias: 'widget.teststore'
,proxy: {
type: 'ajax',
url : '../data/prods.json',
reader: {
type: 'json'
,root: 'data'
}
}
});
Ext.define('TestGrid',{
extend: 'Ext.grid.Panel'
,alias: 'widget.testgrid'
,initComponent: function(){
var me=this;
// orig store will not have the listener...
this.origStore = new TestStore({
storeId: 'prodStore'
,fields: this.getAllFields()
});
this.store = this.origStore;
this.columns = [
// Bug 1: if no column is specified, locking does not seem to work with metaData
{ text: 'Name', dataIndex: 'name', width: 100, locked: true }
];
this.createToolbars();
this.callParent();
}
,doOrigStore: function(){
// Bug 2: returning to the original config "forgets" the locked column
this.store = new TestStore({
storeId: 'prodStore'
,fields: this.getAllFields()
});
this.enableLocking = true;
this.reconfigure(null,this.columns);
this.store.load();
}
,swapNoLock: function(btn){
var newCols = [
{ "xtype": 'rownumberer', "width": 35 }
,{ "text": "Name", "dataIndex": "name","width":100 }
,{ "text": "ID", "dataIndex": "id", "width": 60 }
]
,url = '../data/prods2.json';
var newStore = new TestStore({
storeId: 'gridStore' + btn.configOption
,grid: this
,proxy: {
url: url,
type: 'ajax',
reader: {
type: 'json'
,root: 'data'
}
}
});
this.store = newStore;
this.enableLocking = false;
this.reconfigure(null,newCols);
console.log('enableLocking: ',this.enableLocking );
this.store.load();
}
,swapGridConfig: function(btn){
// Swapping the store and the columns. This works fine
var newCols = undefined
,url = '../data/prods.json';
var newStore = new TestStore({
storeId: 'gridStore' + btn.configOption
,grid: this
,proxy: {
url: url,
type: 'ajax',
reader: {
type: 'json'
,root: 'data'
}
}
,listeners: {
'metachange': function(store, meta) {
this.grid.reconfigure(store, meta.columns);
}
}
});
this.store = newStore;
this.enableLocking = true;
this.reconfigure(null,newCols);
console.log('enableLocking: ',this.enableLocking );
this.store.load();
}
,swapGridColGroupConfig: function(btn){
// In this example I am swapping the config with a new grouped col config (basically removing other states)
var newCols = [
{ "text": "Name", "dataIndex": "name","width":100, "locked": true }
,{
"text": "CA"
,"itemId": "CA"
,"columns": [
{ "text": "Status", "dataIndex": "castatus", "width": 60 }
,{ "text": "Expires", "dataIndex": "caexpire", "width": 60, "format": 'Y-j-m' }
]
}
];
if(btn.configOption ===6){
// this will work because I am reloading the store
var newStore = new TestStore({
storeId: 'gridStoreGroupTest'
,grid: this
,proxy: {
url: '../data/prods.json',
type: 'ajax',
reader: {
type: 'json'
,root: 'data'
}
}
});
this.store = newStore;
this.store.load();
}
// But without reloading, the new columns have no data using the same store!
// specifying null instead of this.store when re-binding a store
this.reconfigure(null,newCols);
//console.log(this.store);
//newStore.load();
}
,getAllFields: function(){
return [
{ "name": "id", "type": "int" }
,{ "name": "name", "type": "string" }
,{ "name": "type", "type": "string" }
,{ "name": "castatus", "type": "string" }
,{ "name": "nystatus", "type": "string" }
,{ "name": "caexpire", "type": "date" }
,{ "name": "nyexpire", "type": "date" }
];
}
,createToolbars: function(){
this.dockedItems = [
{
xtype: 'toolbar'
,dock: 'top'
,items: [
{ xtype: 'button'
,text: 'Swap to Orig'
,configOption: 1
,tooltip: {text:'Swaps back to original config'}
,scope: this
,handler: this.doOrigStore
}
,{
xtype: 'button'
,text: 'Swap to Group'
,tooltip: {text:'Swaps to grouped columns and store with metaData config'}
,configOption: 2
,scope: this
,handler: this.swapGridConfig
}
,{
xtype: 'button'
,text: 'Swap (NoGroup/NoLock)'
,tooltip: {text:'Swaps columns and store with metaData config'}
,configOption: 3
,scope: this
,handler: this.swapNoLock
}
,{
xtype: 'button'
,text: 'Swap (no reload)'
,tooltip: {text:'reconfigure columns without loading store'}
,configOption: 4
,scope: this
,handler: this.swapGridColGroupConfig //this.swapState
}
,{
xtype: 'button'
,text: 'CA'
,tooltip: {text:'reconfigure columns without loading store. Should not data show?'}
,configOption: 5
,scope: this
,handler: this.swapGridColGroupConfig //this.swapState
}
,{
xtype: 'button'
,text: 'NY'
,tooltip: {text:'reconfigure columns loading store'}
,configOption: 6
,scope: this
,handler: this.swapGridColGroupConfig //this.swapState
}
]
}
,{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'pagingtoolbar'
,store: this.store
,pageSize: 25
,border: false
,displayInfo: true
,displayMsg: 'Records {0} - {1} of {2}'
}
]
}
]
return this.dockedItems;
}
});
Ext.onReady(function() {
Ext.QuickTips.init();
var grid = new TestGrid({
xtype: 'testgrid'
,itemId: 'test-grid'
,title: 'Grid Reconfigure'
,height: 200
,width: 500
,renderTo: Ext.get('grid-example')
});
Ext.StoreMgr.lookup('prodStore').loadPage(1);
});
Grid Reconfigure does not show data in column without reloading store
Reply With Quote
Originally Posted by JGALFO
