Variable Grid Columns

[Mi-e Foame]

It's become necessary for me to produce a grid with a variable number of columns. I've tried using something along the following lines:

glu.defModel('demo.Column', {
    xtype: 'gridcolumn',
    header: 'Foo',
    dataIndex: 'something',
    renderer: function (v) { return v; }
});

glu.defModel('demo.MahGrid', {
    columns: {
        mtype: 'list'
    },

    init: function () {
        this.columns.add(this.model('Column'));
    }
});

glu.defView('demo.Column', {
    xtype: '@{xtype}',
    header: '@{header}',
    dataIndex: '@{dataIndex}',
    renderer: '@{renderer}'
});

glu.defView('demo.MahGrid', {
    xtype: 'grid',
    columns: '@{columns}'
});

Apparently, ExtJS doesn't like columns coming from lists. I'm getting an error about 

Uncaught TypeError: Cannot read property 'processed' of undefined

Coming from ExtJS:

    // Private. Determine if there are any columns with a locked configuration option
    hasLockedColumns: function(columns) {
        var i,
            len,
            column;

        // In case they specified a config object with items...
        if (Ext.isObject(columns)) {
            columns = columns.items;
        }
        for (i = 0, len = columns.length; i < len; i++) {
            column = columns[i];
            if (!column.processed && column.locked) {
                return true;
            }
        }
    },

It would seem that my "column" is undefined in ExtJS.

Has anyone else got any ideas for displaying a variable number of columns in a grid, while retaining the ability to change add/remove columns as the response from the API changes based on external factors? Thanks!

[Mi-e Foame]

Doing a bit more debugging, it seems like the real problem is that ExtJS is treating my columns as an array. If the ExtJS code were using column = columns.getAt(i) rather than column = columns[i], it would probably work (or at least be closer to working) :-/

[Ryan Smith]

So, this is one of those things that aren't really great with Extjs.  Columns do have to be defined when the grid launches, but they have provided a mechanism for changing them.  Here's what I've done in the past:

viewmodel:

columns: {mtype: 'list'},

when_columns_change_update_grid_columns: {

    on: ['columnsChanged'],

    action: function(){

        var cols = []

        this.columns.foreach(function(col){

            cols.push({title: col.name, dataIndex: col.dataIndex})

        },this)

        this.set('gridColumns', cols)

    }

},

gridColumns: [],

init: function(){//setup grid columns that I want initially}

addColumn: function(){this.columns.add({mtype: 'viewmodel', name: 'test', dataIndex: 'test'})

and then in the view (this is where the magic happens):

columns: '@{gridColumns}',

setColumns: function(value){

    this.reconfigure(null, value)

}

In extjs, they have provided you with a way to update the columns dynamically.  Its reconfigure and it takes the store and the column configuration (so you could also change the store fields if you needed to as well).  This will update the UI appropriately and redraw the grid on the screen.  Then you can add/remove columns to your heart's content and you should be able to easily add/remove columns as you see fit.

I hope that helps!  If you have any problems with any of that, feel free to ask :).

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/55d940d7-1c90-4b5b-b8a3-e933df6a3978%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Josh VanderLinden]

Sweet! Thanks! I'll try that first thing when I get to work tomorrow.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/CAMT%2BkPtqVvCpn7pw5ZS8Ddpn3GOkCZgAJ5guGHvbv-c5eineug%40mail.gmail.com.

[Mi-e Foame]

Ryan, you're my hero yet again! This works beautifully for my initial use case. It seems like it will work fine for the other iterations as well. Thank you so much!

On Monday, April 28, 2014 4:17:02 PM UTC-6, Mi-e Foame wrote:

Sweet! Thanks! I'll try that first thing when I get to work tomorrow.

To unsubscribe from this group and stop receiving emails from it, send an email to glujs+unsubscribe@googlegroups.com.

To post to this group, send email to gl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/55d940d7-1c90-4b5b-b8a3-e933df6a3978%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "GluJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to glujs+unsubscribe@googlegroups.com.