Add and remove main columns from grid.

Questions related to our Sencha Touch based grid component
Post Reply
User avatar
osolano
Posts: 27
Joined: Sat Jun 15, 2013 2:44 pm

Add and remove main columns from grid.

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

User avatar
mats
Core Developer
Core Developer
Posts: 16716
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Add and remove main columns from grid.

Post by 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 :)
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
osolano
Posts: 27
Joined: Sat Jun 15, 2013 2:44 pm

Re: Add and remove main columns from grid.

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

User avatar
osolano
Posts: 27
Joined: Sat Jun 15, 2013 2:44 pm

Re: Add and remove main columns from grid.

Post by osolano »

mats,

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

User avatar
osolano
Posts: 27
Joined: Sat Jun 15, 2013 2:44 pm

Re: Add and remove main columns from grid.

Post by 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?

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Add and remove main columns from grid.

Post by nickolay »

Can you post a test case demonstrating the problem you have?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
osolano
Posts: 27
Joined: Sat Jun 15, 2013 2:44 pm

Re: Add and remove main columns from grid.

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

User avatar
mats
Core Developer
Core Developer
Posts: 16716
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Add and remove main columns from grid.

Post by mats »

We have a new test created for this, investigation ongoing! Thanks for the report! :)
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
nickolay
Core Developer
Core Developer
Posts: 3466
Joined: Mon May 16, 2011 10:48 am

Re: Add and remove main columns from grid.

Post by 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.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

Post Reply