1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    bramvano is on a distinguished road

      0  

    Default [SOLVED] ComboBox width in collapsed rendered panel

    [SOLVED] ComboBox width in collapsed rendered panel


    I have a east panel which is being rendered collapsed by default. In that panel resides a Form with a groupingview containing (potentially) 4 ComboBoxes. One of these comboboxes is always visible (the one that's always rendered correctly). The other three are hidden by default and are set to be visible after some Xml stores are loaded and checked for the number of results they contain (show if store.getCount() > 1).The comboboxes have a fixed with specified.

    If I render east panel expanded, the with of the comboboxes is displayed correctly, but if I render the east panel collapsed the fixed with is not being used. The comboboxes will be rendered wider then they are supposed to. I've tried setting "lazyInit: true" for the east panel, the Form and all the comboboxes. And I've tried setting "lazyRender: true" for all the same objects without the result I'm looking for. I've also tried rendering the comboboxes all visible by default and hiding them after checking the stores, but this makes no difference.

    What else could I try?
    Attached Images

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    bramvano is on a distinguished road

      0  

    Default


    No experiences with this (small) problem on the forum?

  3. #3
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138
    Vote Rating
    0
    Lukman is on a distinguished road

      0  

    Default


    Which browser? What kind of layout did you use for the fieldset? And the code?

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    bramvano is on a distinguished road

      0  

    Default


    Thank you for replying


    Browsers tested: Firefox IE/IE8 and Opera, Safari
    the layout of the fieldset is 'fit'


    One of the comboboxes (properties are the same on all comboboxes except for the store and value field of course)...
    PHP Code:
       this.statusField = new Ext.form.ComboBox(
        {
            
    store:          parent.Data.status,
            
    displayField:   'statusText',
            
    valueField:     'status',
            
    typeAhead:      true,
            
    forceSelectiontrue,
            
    hidden:         true,
            
    lazyRender:     true,
            
    mode:           'local',
            
    triggerAction:  'all',
            
    emptyText:      ' Status...',
            
    selectOnFocus:  true,
            
    editable:       false,
            
    width:          170,
            
    listWidth:      170,
            
    hideLabel:      true,
            
    hideMode:       'offset',
            
    listeners:      {
                
    'select': {
                    
    fn: function(p){ this.apply(); },
                    
    scopethis
                
    }
            }
        }); 
    Conditionaly I do ... this.statusField.setVisible(true); ... for all comboboxes exept for the first one. The first one (shown in image in the start post) always renders correctly.


    The formPanel with fieldsets looks like this....
    PHP Code:
           this.panel = new Ext.form.FormPanel(
        {
            
    autoHeight:     true,
            
    layout:         'fit',
            
    frame:          false,
            
    lazyRender:     true,
            
    border:         false,
            
    hidden:         true,
            
    hideMode:       'offset',
            
    padding:        '5 5 5 5',
            
    margin:         '0 0 0 0',
            
    items:  [
            {
                
    xtype:          'fieldset',
                
    layout:         'fit',
                
    title:          'Filter by...',
                
    collapsible:    false,
                
    autoHeight:     true,
                
    items:          [this.statusFieldthis.sitesFieldthis.slasFieldthis.productsField]
            },{
                
    xtype:          'fieldset',
                
    layout:         'fit',
                
    title:          'Search',
                
    collapsible:    false,
                
    autoHeight:     true,
                
    defaultType:    'textfield',
                
    items :         [this.searchField]
            }],
            
    buttons: [
            {
                
    text'Reset',
                
    handler:    function()
                {
                    
    this.panel.getForm().reset();
                    
    this.statusField.setValue('active');
                    
    parent.Cases.loadData('all');
                    
    this.apply();
                },
                
    scopethis
            
    },{
                
    text:       'Search',
                
    handler:    function()
                {
                    
    this.search();
                },
                
    scope:      this
            
    }]
        }); 
    ...which is an item in a panel that starts collapsed when the page is opened.
    If I start the panel expanded the comboboxes are rendered correctly.

  5. #5
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138
    Vote Rating
    0
    Lukman is on a distinguished road

      0  

    Default


    Try adding these config options into your fieldsets:
    Code:
     layout: 'form',
     defaults: {
        anchor: '100%'
     },

  6. #6
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    29
    Vote Rating
    0
    bramvano is on a distinguished road

      0  

    Default


    You're a hero No need to set a fixed listWidth either anymore.
    Problem solved!

Thread Participants: 1