ExtJS: Adding table inside a dynamically added tab

Question

Hi, i'm fairly new to ExtJS. I adopted some examples and added the functionality to add tabs to a tab-control by clicking on some link. so far so good. now i want to load a ExtJS table into on of the new tabs. the items (rows, columns) are defined in a database on the server side. can you give me some hints how to add the table automatically when the tab is created?

Answer 1

ok, i did some further reading i thing tha autoLoad property is helping me a lot here. i will go from here.

Answer 2

Autoload is good for pulling an HTML table from your server-side code. Does this data ever get updated? If so you will need to reload the entire HTML. I would suggest using a grid instead:

    // tabPanel definitinon
    {
        xtype:"grid",
        //tabId is a unique value created at the time of the tab
        id:"general_props_status_grid_" + tabId,
        ds: C.createStore({
            storeId:"general_props_status_grid_" + tabId,
            autoLoad:true
            proxy: new Ext.data.HttpProxy({
                //path to a serverside page that gerenates a JSON table contents
                url: '?fuseaction=qry_statuses'
            }),

            reader: new Ext.data.JsonReader({
                id: 'status_id',
                root:'data'
            }, [
                {name: 'status_id'},
                {name: 'name'}
            ]),
            remoteSort: false
        }),
        columns:[{
            header: "Status ID",
            dataIndex: 'status_id',
            width:20,
            hidden:true,
            sortable:true
        },{
            header: "Name",
            dataIndex: 'name',
            hideable:false,
            renderer:function(val){
                return "<span class='link'>" + val +"</span>"
            },
            width:150,
            sortable:true
        }],
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        loadMask: true,
        listeners: {
            activate:function(thisGrid){
                //this will reload the grid each time this tab is selected
                thisGrid.getStore().reload();
            }
        }
    }

There are a ton of options for grids, but the above example shows an automatically updating grid via callbacks.