ExtJS的问题请教,为啥我使用的元素每一个都会换行呢?

Ext.onReady(function(){
var form = new Ext.form.FormPanel({
title:'商品查询',
labelSeparator:':',
labelWidth:80,
bodyStyle:'padding:5',
frame:true,
collapsible:true,
height:200,
width:(window.screen.width-230),
renderTo:'form',
items:[
new Ext.form.TextField({
fieldLabel:'商品名称',
id:'pname',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',
clearCls:'allow-float',
selectOnFocus:true,
allowBlank:true
}),
new Ext.form.TextField({
fieldLabel:'生产厂商',
id:'pname2',
width:(window.screen.width-320)*0.18,
itemCls:'float-left',
clearCls:'allow-float',
selectOnFocus:true,
allowBlank:true
}),
new Ext.Button({
text:'开始查询',
itemCls:'float-left',
clearCls:'allow-float'
})
]
});
});ext 元素换行