圈子首页 → ajax → EXT → 论坛
发表回复

一个奇怪的问题，请高手指点

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的字体要大，当然一些偏移量要调哦。
发表回复