1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
    ragendu is on a distinguished road

      0  

    Default Unanswered: how to adjust extjs combo box width

    Unanswered: how to adjust extjs combo box width


    Hi,
    I have a panel which has a couple of combo box and buttons. The first combo box is aligned to the left. I want to align that similar to those below. The button should also be adjacent to the combo. Below is the code.
    I have attached the screen shot of the current panel.
    Could some one please help me...

    Thanks in advance...

    filterPanel = new Ext.Panel({
    renderTo: document.body,
    bodyStyle: 'padding-top: 6px;',
    title: 'Filters',
    collapsible: true,
    collapsed: true,
    width: 450,
    frame: true,
    floating: true,
    layout: 'form',
    labelWidth: 150,
    buttonAlign: 'center',

    items: [
    {
    layout:'column',
    items:[
    {
    columnWidth:.9 ,
    layout: 'form',
    items: [{
    xtype:'combo',
    id: 'xFilterEmail',
    width: 250,
    listWidth: 200,
    fieldLabel: 'Filter by Owner',
    store: emailStore,
    displayField:'emailDisplay',
    valueField:'emailValue',
    triggerAction: 'all',
    value: '<cfoutput>#trim(filterEmail)#</cfoutput>',
    selectOnFocus:false
    }]
    },{
    columnWidth:.1,
    layout: 'form',
    items: [{
    xtype: 'button',
    text: 'ME',
    listeners: {
    click: function(){
    }
    }]
    }]
    },{
    xtype: 'combo',
    id: 'xFilterStatus',
    width: 200,
    listWidth: 200,
    fieldLabel: 'Filter by Status',
    store: statusStore,
    displayField:'statusDisplay',
    valueField:'statusValue',
    triggerAction: 'all',
    value: '<cfoutput>#trim(filterStatus)#</cfoutput>'
    },{
    xtype: 'combo',
    id: 'xFilterCategory',
    width: 200,
    listWidth: 200,
    fieldLabel: 'Filter by Category',
    store: categoryStore,
    displayField:'categoryDisplay',
    valueField:'categoryValue',
    triggerAction: 'all',
    value: '<cfoutput>#trim(filterCategory)#</cfoutput>'
    },{
    xtype: 'combo',
    id: 'xFilterSubjectArea',
    width: 200,
    listWidth: 200,
    fieldLabel: 'Filter by Subject Area',
    store: subjectAreaStore,
    displayField:'subjectAreaDisplay',
    valueField:'subjectAreaValue',
    triggerAction: 'all',
    value: '<cfoutput>#trim(filterSubjectArea)#</cfoutput>'
    },{
    xtype: 'combo',
    id: 'xPageSize',
    width: 200,
    listWidth: 200,
    fieldLabel: 'Number of Requests Shown',
    store: pageSizeStore,
    displayField:'pageSizeDisplay',
    valueField:'pageSizeValue',
    triggerAction: 'all',
    value: '<cfoutput>#thePageSize#</cfoutput>'
    },{
    xtype: 'textfield',
    id: 'xSearch',
    width: 217,
    fieldLabel: 'PID/Description Search',
    value: '<cfoutput>#theSearchField#</cfoutput>'
    },{
    xtype: 'checkbox',
    id: 'xIncTemp',
    fieldLabel: 'Include Temporary Jobs',
    checked: document.getElementById('incTemp').checked
    }
    ],
    buttons: [
    {
    text: 'Clear',
    listeners: {
    click: function(){

    }
    }
    },{
    text: 'Apply',
    id: 'filterSubmitBtn',
    listeners: {
    click: function(){

    document.getElementById('sortForm').submit();
    }
    }
    }
    ]
    });
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,344
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you want multiple components in a row you can use the fieldcontainer.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread