PDA

View Full Version : How to redefine Model dynamically?



jeeshenlee
9 Apr 2012, 2:02 AM
I'm developing on Extjs4 MVC framework and would like to redefine my store's model at run time based on the results returned by another query. How do i do it?



roomTypesStore_Loaded: function (records) {
var roomType;
var fields = [
{ name: 'Id', type: 'int' },
{ name: 'Date', type: 'date' }
];
var columns = [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id',
hidden: true
},
{
xtype: 'datecolumn',
dataIndex: 'Date',
text: 'Date',
format: 'Y.M.d',
flex: 1
}
];

for (var i = 0; i < records.length; i++) {
roomType = records[i].data;
fields[2 + (3 * i) + 0] = { name: roomType.Name + 'Rates', type: 'string' };
fields[2 + (3 * i) + 1] = { name: roomType.Name + 'Selling', type: 'string' };
fields[2 + (3 * i) + 2] = { name: roomType.Name + 'Booked', type: 'string' };
columns[2 + i] = {
text: roomType.Name,
columns: [
{
text: 'Rates',
dataIndex: roomType.Name + 'Rates'
},
{
text: 'Selling',
dataIndex: roomType.Name + 'Selling'
},
{
text: 'Booked',
dataIndex: roomType.Name + 'Booked'
}
]
};
}
var model = Ext.ModelManager.getModel('HEB.model.Schedule');
model.fields = fields;

var scheduleGrid = this.getScheduleGrid();
var scheduleStore = this.getScheduleStore();
scheduleStore.model = model;
if (scheduleGrid != null && scheduleStore != null) {
scheduleGrid.reconfigure(scheduleStore, columns);
}
},


I managed to reconfigure my grid panel but can't seems to be able to redefine/reconfigure my store's model.

I tried the below but seems like not working.


var model = Ext.ModelManager.getModel('HEB.model.Schedule'); model.fields = fields;
Regards,
Jeeshen.

vietits
9 Apr 2012, 5:44 AM
Let have a try with this:


var model = Ext.ModelManager.getModel('HEB.model.Schedule');
model.prototype.fields = fields;

jeeshenlee
9 Apr 2012, 6:30 PM
@vietits, i tried; no luck :(

chramer
9 Apr 2012, 9:41 PM
add

model : 'Schedule'
where you define the 'Schedule' store!

and then :

roomTypesStore_Loaded: function (records) {
var roomType;
var fields = [
{ name: 'Id', type: 'int' },
{ name: 'Date', type: 'date' }
];
var columns = [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id',
hidden: true
},
{
xtype: 'datecolumn',
dataIndex: 'Date',
text: 'Date',
format: 'Y.M.d',
flex: 1
}
];


for (var i = 0; i < records.length; i++) {
roomType = records[i].data;
fields[2 + (3 * i) + 0] = { name: roomType.Name + 'Rates', type: 'string' };
fields[2 + (3 * i) + 1] = { name: roomType.Name + 'Selling', type: 'string' };
fields[2 + (3 * i) + 2] = { name: roomType.Name + 'Booked', type: 'string' };
columns[2 + i] = {
text: roomType.Name,
columns: [
{
text: 'Rates',
dataIndex: roomType.Name + 'Rates'
},
{
text: 'Selling',
dataIndex: roomType.Name + 'Selling'
},
{
text: 'Booked',
dataIndex: roomType.Name + 'Booked'
}
]
};
}

if (!Ext.ModelManager.isRegistered('Schedule'))
Ext.define('Schedule', {
extend : 'Ext.data.Model',
fields : fields,
idProperty : 'Id'
});


var scheduleGrid = this.getScheduleGrid();
var scheduleStore =Ext.create('Heb.store.Schedule');
//scheduleStore.model = model;
if (scheduleGrid != null && scheduleStore != null) {
scheduleGrid.reconfigure(scheduleStore, columns);
}
}

jeeshenlee
9 Apr 2012, 11:04 PM
@chramer, will your solution works on MVC? I tried with no luck. Below is my store definition


Ext.define('HEB.store.Schedule', {
extend: 'Ext.data.Store',

requires: 'HEB.model.Schedule',
model: 'HEB.model.Schedule',

autoLoad: false,
autoSync: false,
pageSize: 20,
proxy: {
type: 'ajax',
api: {
create: '/Schedule/Create',
read: '/Schedule/GetSchedule',
update: '/Schedule/Edit',
destroy: '/Schedule/Delete'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
},
extraParams: {
'hotelId': '',
'startDate': '',
'endDate': ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
}
});

chramer
9 Apr 2012, 11:13 PM
it worked for me!
change the model property to..


model: 'Schedule'

jeeshenlee
9 Apr 2012, 11:28 PM
@chramer, it's working now :D I redefine my Store too using the new model.


roomTypesStore_Loaded: function (records) {
var roomType;
var fields = [
{ name: 'Id', type: 'int' },
{ name: 'Date', type: 'date' }
];
var columns = [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id',
hidden: true
},
{
xtype: 'datecolumn',
dataIndex: 'Date',
text: 'Date',
format: 'Y.M.d',
flex: 1
}
];

for (var i = 0; i < records.length; i++) {
roomType = records[i].data;
fields[2 + (3 * i) + 0] = { name: (roomType.Name).replace(/\s/, "") + 'Rates', type: 'string' };
fields[2 + (3 * i) + 1] = { name: (roomType.Name).replace(/\s/, "") + 'Selling', type: 'string' };
fields[2 + (3 * i) + 2] = { name: (roomType.Name).replace(/\s/, "") + 'Booked', type: 'string' };
columns[2 + i] = {
text: roomType.Name,
columns: [
{
text: 'Rates',
dataIndex: (roomType.Name).replace(/\s/, "") + 'Rates'
},
{
text: 'Selling',
dataIndex: (roomType.Name).replace(/\s/, "") + 'Selling'
},
{
text: 'Booked',
dataIndex: (roomType.Name).replace(/\s/, "") + 'Booked'
}
]
};
}

Ext.define('Schedule', {
extend: 'Ext.data.Model',
fields: fields,
idProperty: 'Id'
});
//var model = Ext.ModelManager.getModel('HEB.model.Schedule');
//console.log(model);

var scheduleGrid = this.getScheduleGrid();
//var scheduleStore = this.getScheduleStore();

Ext.define('Schedule', {
extend: 'Ext.data.Store',

//requires: 'Schedule',
model: 'Schedule',

autoLoad: false,
autoSync: false,
pageSize: 20,
proxy: {
type: 'ajax',
api: {
create: '/Schedule/Create',
read: '/Schedule/GetSchedule',
update: '/Schedule/Edit',
destroy: '/Schedule/Delete'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
},
extraParams: {
'hotelId': '',
'startDate': '',
'endDate': ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
}
});



var scheduleStore = Ext.create('Schedule');
console.log(scheduleStore);
if (scheduleGrid != null && scheduleStore != null) {
scheduleGrid.reconfigure(scheduleStore, columns);
}
console.log(scheduleGrid);

scheduleStore.proxy.extraParams.hotelId = 1;
scheduleStore.proxy.extraParams.startDate = "2012-04-10T15:15:12";
scheduleStore.proxy.extraParams.endDate = "2012-04-10T15:15:12";
scheduleStore.loadPage(1, {
callback: function () {
console.log(scheduleStore);

}
});
},

Thanks!!!

jeeshenlee
9 Apr 2012, 11:42 PM
A follow up question, how do i refer to my store "var scheduleStore = Ext.create('Schedule');" in another function? I can't use "var scheduleStore = this.getScheduleStore();" obviously...

chramer
9 Apr 2012, 11:47 PM
var scheduleStore = this.getScheduleGrid().getStore();