关于vtype的内容还有很多内容要挖掘，但现在我们就点到这里为止，以后有机会再讨论它的其他高级验证。
不知不觉中写了这么多，大家都要歇息了，我们下次再接着讨论，
（因为本人近期考试和其他锁杂事情，近期可能更新较慢，还请大家海量，耐心，支持！）
ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
发布时间：2008-8-7
? 上一篇文章： ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
? 下一篇文章： ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
前言：说句实话，此extjs系列的文章在博客园中的热度不高，可能是学这玩意的人不多吧，但是我觉得有这么个系列的文章对于中国朋友非常有帮助！请大家支持！
上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识，今天我们接着深入解析表单元素中ComboBox组件的使用。会涉及
到.net简单服务器数据交互，但暂不做深入讨论，以后会详细分析服务器交互相关，不过可能要等较长一段时间，呵呵！
5.服务器数据作为ComboBox的数据源实例 首先从服务器获取json数据：
//cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)
public string ServerData=\湖北','江西','安徽']\;
//aspx前台js介绍代码 Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,//获取ServerData的string值，不要用\引起来，否则就不是object数据，而是字符串，这是一个很巧妙的关键点：把服务器的字符串转化为js的object数据，是不是超级方便。
emptyText:'请选择一个省份....', applyTo: 'combo' }); });
//aspx前台html代码
我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。问题来了，js和html怎么调用c#后台
的变量和方法？（变量的调用上面刚刚介绍） 6.js和html怎么调用c#后台的变量和方法
关于这个话题，我不多说，网上很多讲解，在此仅简单说明
- 16 -
1.js调用c#后台变量，参考上面，注意，如果想获取string类型，请在js里用引号 var str=\返回\湖北','江西','安徽']\) 2.js调用c#后台方法：
好了，现在我们有了js获取后台数据的方法手段，不怕不怕啦，不过，这只是一小步。 7.ComboBox的数据源store格式详解
在前面的例子里面，我们一直给ComboBox的数据源store赋值一维数组，其实store支持多维和Store.data.Store类型。
//下面就几种数据以代码举例说明
1.一维数组：[\江西\湖北\，值同时赋给ComboBox的value和text
2.二维和多维数组：[[\第一维和第二维分别赋值给value和text，其他维忽略
3.store类型：包括GroupingStore, JsonStore, SimpleStore. //我们分三步走：
//第一步：提供数据：
var data=[['湖北','hubei'],['江西','jiangxi'],['安徽','anhui']]; //第二步：导入到store中：
var store = new Ext.data.SimpleStore({ fields: ['chinese', 'english'], data : data });
//第三步 :把store托付给comboBox的store var combo = new Ext.form.ComboBox({ store: store,
displayField:'english',//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当select列表时displayField为\
mode: 'local',//因为data已经取数据到本地了，所以'local',默认为\，枚举完 emptyText:'请选择一个省份...', applyTo: 'combo' });
这里我们介绍了两个新的参数displayField和mode，请记住，后面不再专门说明。 8.ComboBox的value获取 添加listeners事件：
- 17 -
//ComboBox的事件很多(api)，我们无法一一讲解，但是我们可以举一反三，select事件就是其中典型的一个
listeners:{
\function(){
alert(Ext.get(\//获取id为combo的值 } }
//这里我们提供了一种不是很好的方法，在此不做过多停留
9.把Extjs的ComboBox样式应用到select的下拉框中去 核心参数介绍
transform:id//用于转换样式的，TimeField作为ComboBox的子类也有此属性 核心代码： //js代码
var ExtSelect=new Ext.form.ComboBox({
transform:\//html中的id width:80//宽度 }); //html代码
//是不是超级简单？ 从中不是也可以看出extjs的不同之处的，不过不明显！ 10.ComboBox的其他重要参数
1.valueField:\//value值字段 2.displayField：\//显示文本字段
3.editable：false//false则不可编辑，默认为true
4.triggerAction:\//请设臵为\否则默认为\的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为\的话，每次下拉均显示全部选项 5.hiddenName:string //真正提交时此combo的name，请一定要注意 6.typeAhead:true,//延时查询，与下面的参数配合 7.typeAheadDelay:3000,//默认250 //其他参数，请参考api，或自行尝试
关于combobox的其他花俏功能在此不多做介绍。
- 18 -
最后一点，如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件，然后在aspx页面引用
这样就有一个问题，我在js里直接获取cs数据就有点不方便。我认为可以这样，在aspx页面里获取数据，并作为js，你就js变量，你就可
以在js里引用了，或者直接通过url地址获取。
之所以这么啰嗦的讲combobox，是因为这个东西有时候真的让人又爱又恨！ 下篇中我们继续讲解form中其他的表单元素！
ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
发布时间：2008-8-7
? 上一篇文章： ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) ? 下一篇文章： ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) N久没有写extjs的，作为一个新手，我为我的这种懒惰行为感到惭愧！
鉴于有朋友反应前面的文章过于简单，我决定以后的文章如果没有闪光点就放在新手区(如果不适合，请跟帖)，不放在首页！ 11.checkbox简单示例 效果图： js代码：
Ext.onReady(function(){ Ext.QuickTips.init();
var myform=new Ext.FormPanel({ frame:true, width:330, layout:\ labelWidth:30,
title:\简单示例\ labelAlign:\
renderTo:Ext.getBody(), items:[{
xtype:\
layout:\//也可以是table,实现多列布局 fieldLabel:'爱好',
isFormField:true,//非常重要,否则panel默认不显示fieldLabel items:[{
columnWidth:.5,//宽度为50% xtype:\
boxLabel:\足球\//显示在复选框右边的文字 name:\ },{
columnWidth:.5, xtype:\
- 19 -
boxLabel:\篮球\ name:\ }] }] }); });
关于多列布局，我们可以使用column或者table布局解决！ //其他几个参数
1.checked：true//true则选中，默认为false 2.name:\//name值
3.value:\//初始化值，默认为undefine 12.radio简单示例
基本上和checkbox一样，不过注意一组单选框必须name值相同，才能单选。 效果图：
代码：
//基本同上，不做过多解释 Ext.onReady(function(){ Ext.QuickTips.init();
var myform=new Ext.FormPanel({ frame:true, width:330, layout:\ labelWidth:30,
title:\简单示例\ labelAlign:\
renderTo:Ext.getBody(), items:[{
xtype:\ layout:\ fieldLabel:'性别', isFormField:true, items:[{
columnWidth:.5, xtype:\ boxLabel:\男\ name:\ //inputValue },{
columnWidth:.5, checked:true, xtype:\ boxLabel:\女\ name:\ }] }] }); });
- 20 -