一个奇怪的问题，请高手指点
 |
yunzhongzi
2008-06-16
最近学习Ext,对它的一些功能真是着迷。但在学的过程中碰到了小小的问题，百思不得其解。详细过程如下，先建立html 文件 myform.html,其代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>用户管理</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="queue.css"> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="myform.js"></script> </head> <body> <h1>用户管理</h1> <div id="user-list"></div> <br> <div id="user-form" ></div> <br> </body> </html>
再建立js文件，myform.js,其代码如下: Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Date.dayNames = [
"日",
"一",
"二",
"三",
"四",
"五",
"六"
];
if(Ext.DatePicker){
Ext.apply(Ext.DatePicker.prototype, {
todayText : "今天",
minText : "日期在最小日期之前",
maxText : "日期在最大日期之后",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control+Right)',
prevText : '上月 (Control+Left)',
monthYearText : '选择一个月 (Control+Up/Down 来改变年)',
todayTip : "{0} (Spacebar)",
okText : "确定",
cancelText : "取消",
format : "y年m月d日"
});
}
if(Ext.form.DateField){
Ext.apply(Ext.form.DateField.prototype, {
disabledDaysText : "禁用",
disabledDatesText : "禁用",
minText : "该输入项的日期必须在 {0} 之后",
maxText : "该输入项的日期必须在 {0} 之前",
invalidText : "{0} 是无效的日期 - 必须符合格式： {1}",
format : "Y-m-d"
});
}
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items:[{
layout:'column',
border:false,
labelSeparator:':',
items:
[ //[NO1_START
{
columnWidth:0.50,
layout: 'form',
border:false,
items:
[{
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
}
,
{
columnWidth:.3,
layout: 'form',
border:false,
items:
[{
style:'margin-top:5px',
xtype:'radio',
//labelStyle:'width:100',
fieldLabel: '性别',
boxLabel:'男',
name: 'sex',
//checked:true,
inputValue:'男',
anchor:'90%'
}]
},
{
columnWidth:.20,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items:
[{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '',
boxLabel:'女',
name: 'sex',
checked:true,
inputValue:'女',
anchor:'95%'
}]
}
,
{
columnWidth:.50,
layout: 'form',
border:false,
items:
[{
xtype:'combo',
store: new Ext.data.SimpleStore(
{
fields: ["retrunValue", "displayText"],
data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
// itemCls:'age-field',
// clearCls:'allow-float',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
}]
}
,
{
columnWidth:.50,
layout: 'form',
border:false,
items: [{
xtype:'datefield',
fieldLabel: '出生日期',
name: 'birthday',
anchor:'90%'
}]
}
] //[NO1_END
}]
});
simpleForm.render("user-form");
});
却出现如图所示效果：
存在两个问题。 单选框标签"男"和单选框靠的太近。好像缺少 text-align:left。学历这一列应该是顶格(左对齐)显示，现在却显示在第二列，左边留了很多空。不知为什么，“学历”这一行和它的上一行有联系。因为上一行分两列，“姓名”，“性别”，各占50%。儿学历这一列也占50%,如果把学历改位占51%,则它就顶格显示。也就是说，“学历”这一列的开始位置是上面那一行的第二列。这是怎么回事，望各位能帮助解答,谢谢
|
|
yunzhongzi
2008-06-17
还以为这里的分为很好，进来之后才大失所望!
|
 |
earthsky
2008-06-17
yunzhongzi
有可能是浏览器的问题， 我把你的例子运行了一下，没有出现问题呀，firefox浏览器 |
|
yunzhongzi
2008-06-17
是的，在firefox下是没问题的。但在Ie6上,ie7上都是有问题的。看来，也没什么办法了。谢谢这位仁兄!
|
|
equalto
2008-06-24
布局规划的有点乱.
建议这样布置: ① 大的布局,column,左右0.5平分; ② 每列里面,从上到下顺序的布置 ③ checkbox的,单独设置. 这里是范例代码: Ext.getBody().update(''); new Ext.Panel({ layout : 'column', title : 'Column Panel', renderTo : document.body, items : [{ columnWidth : .5, layout : 'form', border : false, labelWidth : 100, items : [{ xtype : 'textfield', fieldLabel : 'field1' }, { xtype : 'textfield', fieldLabel : 'field2' }] }, { columnWidth : .5, border : false, items : [new Ext.Panel({ layout : 'column', border : false, items : [{ xtype : 'label', text : 'checkbox', width : 100 }, { columnWidth : .4, border : false, items : [{ xtype : 'checkbox', boxLabel : 'Male' }] }, { columnWidth : .4, border : false, items : [{ xtype : 'checkbox', boxLabel : 'Female' }] }] }), { layout : 'form', border : false, labelWidth : 100, items : [{ xtype : 'textfield', fieldLabel : 'field3' }, { xtype : 'textfield', fieldLabel : 'field4' }] }] }] }) 在2.1版本上跑,label组件在这个版本里才有. 另外说明的是:在column layout中(其实也包括其它的layout),对于复杂的field,都会有问题,原因是正式的el对象要产生一个wrap对象来包裹,而wrap对象,却没能继承该有的cls和其它的属性.因此要用个container将它包裹起来,以保证布局的完整. |
 |
cheng022074
2008-06-29
这个典型的字符集问题，一般改为UTF-8就没有问题了，不过我已经通过修改一些EXT-all.css的CSS设置，已经解决了这个所有field底边没有的问题，还是布局问题，原因很简单，GBK的字体要比UTF的字体要大，当然一些偏移量要调哦。
|
