1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    17
    Vote Rating
    0
    shobhaaradhya is on a distinguished road

      0  

    Default Combobox next to tab button

    Combobox next to tab button


    Hi,

    I am not into design. I am trying to design a tab in extjs where a combo box should be placed next to the tab buttons like what have attached below the image. What are the properties I need to set for this?

    Sample code would be great.

    Also I dont want to fix header text for the gridcolumns at design time, the header text should also take like dataIndex. The header should come from json or anyother datasource.

    tab.png

    Thanks in advance

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    1.You can use following code for set grid header dynamically on storeload event of grid :-

    Code:
    var column = yourgrid.getColumnModel();
     column.setColumnHeader(index of column header, 'value');
    2. For placing combo in your tab panel:-

    you may use a separate toolbar above tabpanel in order to make a combo.
    you may put whatever you want in that toolbar i.e. button, text field , combo,etc.. as per your needs and do operations based on that!

    but if you really needs to put a a combo in tabpanel's tab, you may use following code , BUT BEWARE it will render a simple html select field rather than a extjs combo.

    Code:
    var tabs = new Ext.TabPanel({
            renderTo: Ext.getBody(),
            activeTab: 0,
            items: [{
                title: 'Tab 1',
                html: 'A simple tab'
            }, {
                title: 'Tab 2',
                html: 'Another one'
            },
            {
                title: '<select> <option>abc</option><option>xyz</option></select>'
            }]
        });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 1

Tags for this Thread