52,797
社区成员
发帖
与我相关
我的任务
分享一个panel的问题
extjs，在一个panel中定义了一个combox，一个txtfield，这两个控件是紧挨着的，就是说后面的txtfield是隐藏label的，在ff中显示很正常，在ie中，这个txtfield就会显示在第二行，这是怎么回事啊？有什么值可以设置吗？
...全文
请发表友善的回复…
发表回复
hoojo 2010-10-16
- 打赏
- 举报
设置布局column
form布局是一行一个form组件hoojo 2010-10-16
- 打赏
- 举报
将布局的宽度调整下，form布局是一行一个form组件
用列布局即可
lfkcn 2010-10-16
- 打赏
- 举报
需要设置width，这样ie也就能显示在一行了，但是我不想用这个width啊，我的终极目标是要实现panel中的这两个控件交替显示，如果用了width貌似是无法实现的，郁闷
lfkcn 2010-10-16
- 打赏
- 举报
[Quote=引用 7 楼 ibm_hoojo 的回复:]
CSS code
设置布局column
form布局是一行一个form组件
[/Quote]
panel的布局已经设置为column了，我把panel中的两个item（comboscriptsign和txtscriptid）的layout都修改过了，还是不行，但是这样设置在firefox是可以的，在ie下死活不行，还有什么别的方法吗？
谢谢大家
CSS code
设置布局column
form布局是一行一个form组件
[/Quote]
panel的布局已经设置为column了，我把panel中的两个item（comboscriptsign和txtscriptid）的layout都修改过了，还是不行，但是这样设置在firefox是可以的，在ie下死活不行，还有什么别的方法吗？
谢谢大家
lfkcn 2010-10-15
- 打赏
- 举报
var scriptsigndata = [[1,'>'],[2,'<'],[3,'='],[4,'>='],[5,'<=']];
var comboscriptsign=new Ext.form.ComboBox({
fieldLabel: 'Script ID',
disabled:false,
width:40,
name :'script_sign',
displayField:'name',
valueField: 'name',
mode: 'local',
triggerAction: 'all',
//forceSelection:true,
editable:false,
allowBlank:true,
emptyText:'Please select ...',
//readOnly: true,
store:new Ext.data.SimpleStore({
fields:["id","name"],
data:scriptsigndata
}),
hiddenName: 'scriptsign'
});
comboscriptsign.setValue('=');
var txtscriptid=new Ext.form.TextField({
fieldLabel:'ID Value',
disabled:false,
hideLabel : true,
width:182,
name :'script_id'
});
var Panelscriptsearch=new Ext.Panel({
border:false,
layout:'column',
//labelAlign:'left',
width:800,
items:[{
layout:'form',
border:false,
//width:200,
items:[comboscriptsign]
},
{
layout:'form',
border:false,
//width:100,
items:[txtscriptid]
}
]
});
我的panel是这样定义的，看不出来有什么问题啊？
var comboscriptsign=new Ext.form.ComboBox({
fieldLabel: 'Script ID',
disabled:false,
width:40,
name :'script_sign',
displayField:'name',
valueField: 'name',
mode: 'local',
triggerAction: 'all',
//forceSelection:true,
editable:false,
allowBlank:true,
emptyText:'Please select ...',
//readOnly: true,
store:new Ext.data.SimpleStore({
fields:["id","name"],
data:scriptsigndata
}),
hiddenName: 'scriptsign'
});
comboscriptsign.setValue('=');
var txtscriptid=new Ext.form.TextField({
fieldLabel:'ID Value',
disabled:false,
hideLabel : true,
width:182,
name :'script_id'
});
var Panelscriptsearch=new Ext.Panel({
border:false,
layout:'column',
//labelAlign:'left',
width:800,
items:[{
layout:'form',
border:false,
//width:200,
items:[comboscriptsign]
},
{
layout:'form',
border:false,
//width:100,
items:[txtscriptid]
}
]
});
我的panel是这样定义的，看不出来有什么问题啊？
Neverpenny 2010-10-15
- 打赏
- 举报
你不要textfield的label 你只要把
fieldLabel: '电话',
这一行删了就行了
fieldLabel: '电话',
这一行删了就行了
Neverpenny 2010-10-15
- 打赏
- 举报
我刚刚写了一个，在Ext3.0下测试过了，在ie8中没有问题
js如下：
Ext.onReady(function () {
var test = new Ext.FormPanel({
labelWidth: 75,
labelAlign:'right',
frame:true,
maximized:true,
autoScroll:true,
buttonAlign:'center',
// bodyStyle:'padding:5px 5px 0',
width: '100%',
items: [
{
layout:'column',
items:[{
columnWidth:.3,
layout: 'form',
items: [{
fieldLabel:'测试',
id:'sex',
name:'sex',
hiddenName:'hidden_sex',
xtype:'combo',
store:
new Ext.data.SimpleStore({
fields:['value','text'],
data:[['男','男'],['女','女']]
}),
displayField:'text',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
value:'男',
selectOnFocus:true,
anchor:'95%'
}
]
},{
columnWidth:.3,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '电话',
id:'companyTel',
name: 'companyTel',
anchor:'95%',
msgTarget:'under',
regex:/^-?[0-9]\d*$/,
regexText:'数字！'
}
]
}]
}
]
});
var testWin=new Ext.Window({
id:'Win',
title:'test',
layout:'fit',
closable:true,
autoScroll:true,
width:600,
height:200,
bodyStyle:'padding:15px;',
plain:true,
items:[test]
});
testWin.show();
})
直接把这个js引入你的页面就可以了
js如下：
Ext.onReady(function () {
var test = new Ext.FormPanel({
labelWidth: 75,
labelAlign:'right',
frame:true,
maximized:true,
autoScroll:true,
buttonAlign:'center',
// bodyStyle:'padding:5px 5px 0',
width: '100%',
items: [
{
layout:'column',
items:[{
columnWidth:.3,
layout: 'form',
items: [{
fieldLabel:'测试',
id:'sex',
name:'sex',
hiddenName:'hidden_sex',
xtype:'combo',
store:
new Ext.data.SimpleStore({
fields:['value','text'],
data:[['男','男'],['女','女']]
}),
displayField:'text',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
value:'男',
selectOnFocus:true,
anchor:'95%'
}
]
},{
columnWidth:.3,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '电话',
id:'companyTel',
name: 'companyTel',
anchor:'95%',
msgTarget:'under',
regex:/^-?[0-9]\d*$/,
regexText:'数字！'
}
]
}]
}
]
});
var testWin=new Ext.Window({
id:'Win',
title:'test',
layout:'fit',
closable:true,
autoScroll:true,
width:600,
height:200,
bodyStyle:'padding:15px;',
plain:true,
items:[test]
});
testWin.show();
})
直接把这个js引入你的页面就可以了
lfkcn 2010-10-15
- 打赏
- 举报
[Quote=引用 1 楼 xx19890703 的回复:]
ie中就会默认的换行了，一个控件就是一行
如果一定要放在一行中 ，就要用column的布局方式
在你的panel中的items里写
{
layout:'column',
items:[{
columnWidth:.3,//根据你的combo调整这个……
[/Quote]
我就是这样定义的啊，ie中还是不行
ie中就会默认的换行了，一个控件就是一行
如果一定要放在一行中 ，就要用column的布局方式
在你的panel中的items里写
{
layout:'column',
items:[{
columnWidth:.3,//根据你的combo调整这个……
[/Quote]
我就是这样定义的啊，ie中还是不行
Neverpenny 2010-10-15
- 打赏
- 举报
ie中就会默认的换行了，一个控件就是一行
如果一定要放在一行中 ，就要用column的布局方式
在你的panel中的items里写
{
layout:'column',
items:[{
columnWidth:.3,//根据你的combo调整这个
layout: 'form',
items: [
//放你的combobox
]
},{
columnWidth:.3,//根据panel情况调整这个
layout: 'form',
items: [
//放你的textfield
]
}]
}
如果一定要放在一行中 ，就要用column的布局方式
在你的panel中的items里写
{
layout:'column',
items:[{
columnWidth:.3,//根据你的combo调整这个
layout: 'form',
items: [
//放你的combobox
]
},{
columnWidth:.3,//根据panel情况调整这个
layout: 'form',
items: [
//放你的textfield
]
}]
}
