对《Ext2.0 form使用实例》的一点补充
经过新一轮实践，又掌握了不少东西。本文针对《Ext2.0 form使用实例》中没有谈到的东西进行一点补充。
<!--[if !supportLists]-->1、 <!--[endif]-->增加一个空白列
| <!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:414.75pt; height:45pt'> <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\03\clip_image001.jpg" o:title="form-5" /> </v:shape><![endif]--><!--[if !vml]--> |
如图红色框部分，如果需要在列里面增加一个空白的位置，只要增加一个高度为28的panel就行了。代码如下：
| items:[{ columnWidth:.5,layout: 'form',border:false, items:[ {xtype:'textfield',fieldLabel: '企业名称',maxLength:100,name: 'txt3',allowBlank:false,anchor:'90%',tabIndex:0}, {xtype:'textfield',fieldLabel: '联系人',maxLength:30,name: 'txt5',anchor:'90%',tabIndex:2}, {xtype:'textfield',fieldLabel: '联系电话',name: 'txt7',anchor:'90%',tabIndex:4}, {xtype:'textfield',fieldLabel: '传真',name: 'txt9',anchor:'90%',tabIndex:6}, {xtype:'textfield',fieldLabel: '电子邮件',name: 'txt19',anchor:'90%',tabIndex:8,vtypes:'email'}, this.provinceCombo ]},{ columnWidth:.5,layout: 'form',border:false, items:[ this.classCombo, {xtype:'textfield',fieldLabel: '职务',maxLength:100,name: 'txt4',anchor:'90%',tabIndex:1}, {xtype:'textfield',fieldLabel: '手机',name: 'txt7',anchor:'90%',tabIndex:3}, {xtype:'textfield',fieldLabel: '公司主页',name: 'txt6',anchor:'90%',tabIndex:5,vtypes:'url'}, {xtype:'panel',border:0,height:28}, this.cityCombo ]} ] |
代码中红色部分。
<!--[if !supportLists]-->2、 <!--[endif]-->Tab键控制光标焦点
如果象上面那段代码定义 form 控件，你会发现 tab 键的循序是先一列完后再移动到另一列的，要修正这个问题，设置一下控件的 tabIndex 属性就行了。这个和 Delphi 等的编程有些类似，呵呵。