Grid store switch help

[zachHurt]

Hello,

I am evaluating the EXTJS4 framework currently and have been playing around with Architect quite a bit. I am developing software that needs to be able to dynamically read in data to a grid. Now I have the gird switching the url of the proxy of the store but that only appears to work if the files associate with the same model. How do I go about changing the grids's associated model so it will work.
I started using a simple controller to listen for button clicks (my prototype only has one button) and I have it switching the store but can't get much further than that.



Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',


views: [
'MainPanel'
],


refs: [
{
ref: 'MainPanel',
selector: '#mainPanel'
},
{
ref: 'grid',
selector: '#grid'
},
{
ref: 'CarDataStore',
selector: '#carDataStore'
}
],


onButtonClick: function(button, e, options) {
var grid = this.getGrid();
var store = Ext.getStore('CarDataStore');
var model = Ext.ModelManager.getModel('MyApp.model.CarDataModel');
//console.log(grid);
//console.log(store);


//grid.store.removeAll();
//grid.store = store;
//console.log(grid.store);


//grid.store.sync();
grid.bindStore(store);


//grid.dataIndex = grid.store.model.getName();
//grid.autoColumns();
grid.update();
//console.log(grid.store);
function columnAlignment(){
var column1 = grid.columns[0];
console.log(model);
console.log(column1);
// console.log(grid.store.model);


}
columnAlignment();
console.log(grid);
//console.log(grid.dataIndex);
},


init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});


}


});




PS, I know my code is terrible. I am just an intern

[redraid]

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

[zachHurt]

I gave that a shot with....


var grid = this.getGrid();
var store = Ext.getStore('CarDataStore');
var model = Ext.ModelManager.getModel('MyApp.model.CarDataModel');
console.log(store);
grid.reconfigure(store);

var fields = grid.columns;
console.log(fields);



//grid.dataIndex = grid.store.model.getName();
//grid.autoColumns();
grid.update();
//console.log(grid.store);




console.log(grid);
//console.log(grid.dataIndex);
and that changes the store the same way i was changing the store before but ti still willnot change the columns and my question was more along the lines of changing the columns and the grid responding to that change and displaying the data accordingly.

[redraid]

reconfigure method has 2 arguments - 1st store, 2nd array of column configs -



var grid = this.getGrid(),
store = Ext.getStore('CarDataStore'),
model = Ext.ModelManager.getModel('MyApp.model.CarDataModel'),
fields = model.getFields(),
cols = [];

// Create columns for new store
Ext.Array.forEach(fields, function (f) {
cols.push({
header: f.name,
dataIndex: f.name
});
});

grid.reconfigure(store, cols);

[zachHurt]

I put your code in and it makes complete sense to me how it should work but everytime I run it now the java script console says: "TypeError: Object function () { return this.constructor.apply(this, arguments); } has no method 'getFields' "

[redraid]

Change
fields = model.getFields(), to
fields = store.model.getFields(),

[zachHurt]

That, unfortunately, yields the same results. I am not sure how to access just the model object. I ran a console.log(store.model) and it returns: "function () { return this.constructor.apply(this, arguments); } "