Results 1 to 4 of 4

Thread: issue with placing combo next to tab buttons

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    17
    Vote Rating
    0
      0  

    Default issue with placing combo next to tab buttons

    Hi,

    I want to place a combobox next to tab buttons. this should be visible for all tab buttons. The design should look similar to attached image. This may be something like placing combobox on tab panel with right aligned.

    Can anyone help me to design this.

    Thanks in advance,
    Attached Images Attached Images

  2. #2
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Vote Rating
    90
      0  

    Default Hard design

    I think that you selected hard design but you should add this combo for each tab to their tbar.It's a way more easy..
    Attached Images Attached Images
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User poojagarg89's Avatar
    Join Date
    Sep 2011
    Location
    Ahmedabad,India
    Posts
    213
    Vote Rating
    2
      0  

    Default

    I also tried this but you can do one thing is don't apply in tbar of all tabs.............better go for tbar of that particular TabPanel so it will give u the combo common for all Tabs........!!!

    Here is the screen shot:
    test_tabpanel.jpg

    here is the code for it:
    Code:
    test_tabs = new Ext.TabPanel({
        region:'center',
        id:'test_tabs',
        activeTab:0,
        layoutOnTabChange:true,
        margins:'0 5 5 0',
        resizeTabs:true,
        tabWidth:270,
        cls:"my-class1",
        minTabWidth: 270,
        enableTabScroll: true,
        items: [{
            id:'tab1',
            title: 'Tab 1',
            layout:'fit',
            region:'center',
            hideMode:'offsets',
            items:[]
        },{
            id:'tab2',
            title: 'Tab 2',
            layout:'fit',
            region:'center',
            hideMode:'offsets',
            items:[]
        }],
        tbar:[                                                        // TBAR of the Ext.TabPanel 
        " ","Test Combo"," "
        ,{
            xtype: "combo",
            id: "test_combo",
            name: "test_combo",
            store: "",
            displayField:"",
            valueField:"",
            queryMode: "local",
            emptyText:"Test Combo",
            width:200
        }]
    });

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default tabpanel with combo alignment

    I am the beginner of extjs. I need the combo with tabpanel like the image(tabpanel_with_combo_2.png), my ext code below,

    {
    xtype:'tabpanel',
    flex:1,
    layout: 'fit',
    padding: '0px 0px 0px 0px',
    style: {
    background: 'none'
    },
    plain: false,
    cls: 'tablayout',
    border: false,
    frame: false,
    items: [{
    title: 'Top 10 SLAs By Compliance',
    autoScroll: true,
    items: [{
    xtype: 'top10slapanel'
    }]
    },{
    title: 'Top 10 Components By Compliance',
    autoScroll: true,
    items: [{
    xtype: 'top10componentspanel'
    }]
    }]
    tbar:[{
    xtype: 'scrollcombo',
    labelWidth:150,
    fieldLabel:'Filter By',
    cls:'dropdown',
    labelStyle: 'white-space: nowrap;',
    name:'',
    labelAlign:'left',
    labelSeparator:''
    }]
    }

    What should i change on this code. Can anyone help me to design this.

    Thanks and Regards,
    Jaiwin

    tabpanel_with_combo_2.pngtabpanel_with_combo_1.png

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •