1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    9
    Vote Rating
    0
    mudittuli is on a distinguished road

      0  

    Default Combobox rendering issue in viewport

    Combobox rendering issue in viewport


    Hi,
    I have a form with a combobox in a viewport, the combobox is not rendering the way it should(the screen shot is attached), seems like the list width is 0. Though the combobox will render fine, when the form is not added to a viewport.
    Below is the markup from Introspector and when I increase the width marked in blue, the list width starts to increase.
    Code:
    <DIV id="ext-gen48" class="x-form-field-wrap" style="width: 0px; ">
        <INPUT id="combo" type="text" size="24" autocomplete="off" name="metro_name" class=" x-form-text x-form-field" style="width: 230px; "/>
        <IMG id="ext-gen49" src="http://extjs.com/s.gif" class="x-form-trigger x-form-arrow-trigger"/>
    <DIV />
    Can I increase the width of the above div, somehow ?
    Or please point to something stupid I am doing here.

    Below is the combobox code
    Code:
    var statusTpl = new Ext.XTemplate(
    		'<tpl for="."><div class="x-combo-list-item">{status}</div></tpl>'
    );
    var metroTpl = new Ext.XTemplate(
    		'<tpl for="."><div class="x-combo-list-item">{metro}</div></tpl>'
    );
    
    Ext.onReady(function() {
    	 var metro_store = new Ext.data.SimpleStore({
            fields: ['metro_name', 'metro'],
            data : metros
        })
    	var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.ComboBox({
    		     	fieldLabel: 'Metro',
    		     	listWidth :230,
    		     	lazyRender:true,
    		     	minListWidth:230,
    		        name: 'metro_name',
    		        store:metro_store,
    		        tpl:statusTpl,
    		        bodyStyle:'width:100px',
    		        valueField :'metro',
    		        displayField:'metro',
    		        typeAhead: true,
    		        mode: 'local',
    		        triggerAction: 'all',
    		        selectOnFocus:true,
    		        tpl:metroTpl
    		     })
            ],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        simple.render('filter_form');
        
        
        var viewport = new Ext.Viewport({
    	    layout:'border',
    	    items:[{
                region:'center',
                contentEl:'filter_form',
                closable:false,
                height: 600,
                minSize: 100,
                maxSize: 600,
            }]
    	});
    	
    });
    Attached Images

  2. #2

Thread Participants: 1