Results 1 to 9 of 9

Thread: How to redefine Model dynamically?

  1. #1

    Default Answered: How to redefine Model dynamically?

    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?

    Code:
        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.
    Code:
            var model = Ext.ModelManager.getModel('HEB.model.Schedule');         model.fields = fields;
    Regards,
    Jeeshen.

  2. add
    Code:
    model : 'Schedule'
    where you define the 'Schedule' store!

    and then :
    Code:
    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);
            }
        }

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Let have a try with this:
    Code:
    var model = Ext.ModelManager.getModel('HEB.model.Schedule');         
    model.prototype.fields = fields;

  4. #3

    Default

    @vietits, i tried; no luck

  5. #4
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

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

    and then :
    Code:
    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);
            }
        }

  6. #5

    Default

    @chramer, will your solution works on MVC? I tried with no luck. Below is my store definition

    Code:
    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'
            }
        }
    });

  7. #6
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    it worked for me!
    change the model property to..
    Code:
    model: 'Schedule'

  8. #7

    Default

    @chramer, it's working now I redefine my Store too using the new model.

    Code:
        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!!!

  9. #8

    Default

    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...

  10. #9
    chramer's Avatar
    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    Code:
    var scheduleStore = this.getScheduleGrid().getStore();

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •