Add and remove main columns from grid.

[osolano]

Hi,

I'd like to programmatically add and remove columns from ubergrid. Looking at the documentation it seems as if you can only do this for child columns, but I want to do this for the main column.

If possible, would there be an easy way to remove all of the columns and just add new ones?

I see that there is a plugin for headermenu, but what I'm trying to do is basically load different stores in the same grid.

[mats]

Yes you can. You can see this demonstrated by our test suite. Open /tests/ and run this test:

014_add_remove.t.js

It shows you all you need to know

[osolano]

mats,

It looks like insertColumn and appendColumn only add children to existing columns in ubergrid. I want to add new main/primary columns.

I wrote something like this:
grid.columns.appendColumn({
header : 'TEST',
//dataIndex : 'CURRENCY',
width :300
});
grid.refresh();

and also tried

grid.columns.insertColumns(0,{
header : 'TEST',
//dataIndex : 'CURRENCY',
width :300
});
grid.refresh();

but it doesn't get configured as a column in ubergrid.

[osolano]

mats,

I think I figured out this issue. Please don't look into this.

[osolano]

mats,

I've found out that if any of your columns are locked, you can't insert or append a new column to the grid. Is this something that you can fix?

[nickolay]

Can you post a test case demonstrating the problem you have?

[osolano]

In my case the code I've been testing with is:

Code: Select all

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',

    requires: [
        'MyApp.view.MyToolbar'
    ],

    config: {
        layout: {
            type: 'fit'
        },
        items: [
            {
                xtype: 'ubergrid',
                columns: [
                    {
                        header: 'name',
                        dataIndex: 'name',
                        width: 100,
                        locked: true
                    },
                    {
                        header: 'field',
                        dataIndex: 'field',
                        width: 200
                    }
                ],
                id: 'grid'
            },
            {
                xtype: 'mytoolbar'
            }
        ]
    }

});
Ext.define('MyApp.view.MyToolbar', {
    extend: 'Ext.Toolbar',
    alias: 'widget.mytoolbar',

    config: {
        docked: 'top',
        items: [
            {
                xtype: 'button',
                itemId: 'mybutton',
                text: 'MyButton'
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonTap',
                event: 'tap',
                delegate: '#mybutton'
            }
        ]
    },

    onMybuttonTap: function(button, e, eOpts) {
        var grid = Ext.getCmp('grid');
        grid.columns.appendColumn({
            header    : 'field2',
            dataIndex : 'field2',
            width     : 200
        });
    }

});

My guess is if you set the first column to be locked in 014_add_remove.t.js, it will not work either.

[mats]

We have a new test created for this, investigation ongoing! Thanks for the report!

[nickolay]

Should be fixed in the sources now. The cause was: http://www.sencha.com/forum/showthread. ... rect-order

Please try your code with tomorrow nightlies and let us know if it works now.