Results 1 to 2 of 2

Thread: how to adjust extjs combo box width

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    30
    Vote Rating
    0
      0  

    Default 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 Attached Images

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,780
    Answers
    3955
    Vote Rating
    1312
      0  

    Default

    If you want multiple components in a row you can use the fieldcontainer.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

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