Extjs 4 Dynamic Model

[tobiu]

hi ed, sure.

ext 3.4 version:

    reconfigure : function(store, colModel){
        var rendered = this.rendered;
        if(rendered){
            if(this.loadMask){
                this.loadMask.destroy();
                this.loadMask = new Ext.LoadMask(this.bwrap,
                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));
            }
        }
        if(this.view){
            this.view.initData(store, colModel);
        }
        this.store = store;
        this.colModel = colModel;
        if(rendered){
            this.view.refresh(true);
        }
        this.fireEvent('reconfigure', this, store, colModel);
    },

ext 4 version:

    reconfigure: function(store, columns) {
        var me = this,
            headerCt = me.headerCt;

        if (me.lockable) {
            me.reconfigureLockable(store, columns);
        } else {
            if (columns) {
                headerCt.suspendLayout = true;
                headerCt.removeAll();
                headerCt.add(columns);
            }
            if (store) {
                store = Ext.StoreManager.lookup(store);
                me.bindStore(store);
            } else {
                me.getView().refresh();
            }
            if (columns) {
                headerCt.suspendLayout = false;
                me.forceComponentLayout();
            }
        }
        me.fireEvent('reconfigure', me);
    }

so, if you have a column model with:

defaults : {
    align : 'left',
    width : 100
}

and want to change it to

defaults : {
    align : 'center',
    width : 200
}

you can still do it with applying it to each column manually, but it does not look as clean than before + it was 2 ext instances before. it is like if you would replace the first param store with the fields-array (not even the model ).

so, to not break compatibility i suggest that you make the 2nd param optional: columns / colModel and check if it is an array or not.


best regards
tobi

[edspencer]

Right, but there is no ColumnModel in 4.x - it's just an array of columns... it doesn't sound like the architecture supports what you're asking for here

[tobiu]

hi ed, it does

Ext.grid.header.Container is exactly the old columnModel.

In the first releases of ext 4, it was only possible to specify an array of columns when creating a grid. Later on (beta3+, don't know for sure) it was also allowed again to set the "colModel" directly:

Ext.panel.Table:

    initComponent: function() {
            var me          = this,
            scroll      = me.scroll,
            vertical    = false,
            horizontal  = false,
            headerCtCfg = me.columns || me.colModel,

i think it is still missing in the api docs, but works fine.
maybe it should also be renamed to headerCt (or headerCt back to colModel which makes more sense imho).

so, the most important point is only the reconfigure method and checking for an array or headerCt should be really easy to implement


best regards
tobias

[edspencer]

Ok - if that's the case we'll do it. I asked Aaron to check out this thread

[pmachner]

Hi Ed,
I've got a question related to the original problem. I have a grid whose list of columns is dynamic. So every time I change the columns in the grid I call grid.reconfigure to change the store and the list of columns. I create a new store every time the columns change, but what should I do about the model for the new store?

I see two options:
1) create a new model with a dynamically generated name each time I need a new column list. I understand that using the model is the suggested way of doing such stuff in ExtJS4, but still having so many dynamic models which are not used later seems rather silly

2) use the 'fields' property of the store, whenever creating the new store, which seems cleaner but not recommended by Sencha...

What do you think?
Thanks and best regards,
Piotr

[edspencer]

Using fields in the Store is totally ok for this

[pmachner]

Thanks Ed

[diablo]

@SenchaGuru that's way overcomplicated - you can easily define new classes at runtime based on any configuration... you can replace this:

model =  {
    extend: 'Ext.data.Model',
    fields: fields
};
eval("Ext.define('"+name+"',"+Ext.encode(model)+");");

With this:

var model = {
    extend: 'Ext.data.Model',
    fields: fields
};

Ext.define(name, model);

No need for eval or anything like that (and also note the "var" statement in my replacement above - previously you'd been leaking a global variable there. In fact there's really no need to create that var in the first place, your function should just be:

// Generate a model dynamically, provide fields
function modelFactory(name, fields) {
    return Ext.define(name, {
        extend: 'Ext.data.Model',
        fields: fields
    });
}

Hi Ed,

can you please give me some hints regarding:
# how would you redefine a model?
# how can you remove a model and define it again?
# how can you modify a the already defined model relations: i.e. adding a new field to a existent model=

Thanks in advance!

[julien.meyer]

Hi diablo,

I need also some "dynamic" models into my application.

# how can you modify a the already defined model relations: i.e. adding a new field to a existent model=

I don't know if the following solution is the best practice, but it works :

this.fields.add('FieldName',Ext.create('Ext.data.Field',{name:'FieldName', ...}));

So I imagine, you can also remove some field in the same manner.

[archanalal.sencha]

Hi edspencer,

I am creating store for my chart. And I have to update store's model before I am reloading the store.
Please let me know the way to do show.
I have used setModel() method to update store model but its not reflecting after store reload.

Any help appreciated.

Thanks.