mudittuli
31 Mar 2008, 10:24 PM
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.
<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
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,
}]
});
});
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.
<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
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,
}]
});
});