前言:说句实话,此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代码
<input type="text" id="combo" size="20"/>


我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。问题来了,js和html怎么调用c#后台
的变量和方法?(变量的调用上面刚刚介绍)
6.js和html怎么调用c#后台的变量和方法
关于这个话题,我不多说,网上很多讲解,在此仅简单说明
1.js调用c#后台变量,参考上面,注意,如果想获取string类型,请在js里用引号 var str="<%=ServerData%>"(返回"['湖北','江西','安徽']")
2.js调用c#后台方法:

<!--后台有一个方法:
public string ServerData()
    {
        return "fdfdfdfdsf";
    }
前台代码:-->
<input id="Text2" type="text" value="<%=ServerData()%>"/>

3.js调用c#后台带参数的方法

<!--public string ServerData(string pram)
    {
        return pram+",我是参数传进来的";
    }
主要是处理好js的引号问题,多尝试就会正确-->
<script>alert('<%=ServerData("谦虚的天下") %>');</script>

好了,现在我们有了js获取后台数据的方法手段,不怕不怕啦,不过,这只是一小步。
7.ComboBox的数据源store格式详解
在前面的例子里面,我们一直给ComboBox的数据源store赋值一维数组,其实store支持多维和Store.data.Store类型。

//下面就几种数据以代码举例说明
1.一维数组:["江西","湖北"],值同时赋给ComboBox的value和text
2.二维和多维数组:[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给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为"text"
        mode: 'local',//因为data已经取数据到本地了,所以'local',默认为"remote",枚举完
        emptyText:'请选择一个省份...',
        applyTo: 'combo'
    });


这里我们介绍了两个新的参数displayField和mode,请记住,后面不再专门说明。
8.ComboBox的value获取
添加listeners事件:

//ComboBox的事件很多(api),我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一个       
              listeners:{
                "select":function(){
                            alert(Ext.get("combo").dom.value);   //获取id为combo的值
                         }
            }
//这里我们提供了一种不是很好的方法,在此不做过多停留


9.把Extjs的ComboBox样式应用到select的下拉框中去
核心参数介绍

transform:id//用于转换样式的,TimeField作为ComboBox的子类也有此属性

核心代码:

//js代码
var ExtSelect=new Ext.form.ComboBox({
             transform:"select",//html中的id
             width:80//宽度
         });
//html代码
<select id="select">
        <option value="1">浪曦</option>
        <option value="2">博客园</option>
        <option value="3">百度</option>
        <option value="4">新浪</option>
    </select>
//是不是超级简单?

    从中不是也可以看出extjs的不同之处的,不过不明显!
10.ComboBox的其他重要参数

1.valueField:"valuefield"//value值字段
2.displayField:"field" //显示文本字段
3.editable:false//false则不可编辑,默认为true
4.triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name,请一定要注意
6.typeAhead:true,//延时查询,与下面的参数配合
7.typeAheadDelay:3000,//默认250
//其他参数,请参考api,或自行尝试

关于combobox的其他花俏功能在此不多做介绍。
最后一点,如何实现在aspx页面更灵活的分离cs数据和js数据的交互?因为我们都喜欢把js放在一个单独的文件,然后在aspx页面引用
这样就有一个问题,我在js里直接获取cs数据就有点不方便。我认为可以这样,在aspx页面里获取数据,并作为js,你就js变量,你就可
以在js里引用了,或者直接通过url地址获取。
之所以这么啰嗦的讲combobox,是因为这个东西有时候真的让人又爱又恨!
下篇中我们继续讲解form中其他的表单元素!

ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)相关推荐

  1. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

    随笔- 71  文章- 10  评论- 1096  ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox ...

  2. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

    随笔- 71  文章- 10  评论- 1096  ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormP ...

  3. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)

    在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下! 其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解! 先来个简单的例子,以 ...

  4. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)

    N久没有写extjs的,作为一个新手,我为我的这种懒惰行为感到惭愧! 鉴于有朋友反应前面的文章过于简单,我决定以后的文章如果没有闪光点就放在新手区(如果不适合,请跟帖),不放在首页! 11.check ...

  5. ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)

    继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改! LinqData.dbml: html代码: <body><divid=& ...

  6. ExtJs2.0学习系列(2)--Ext.Panel

    随笔- 71  文章- 10  评论- 1096  ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...

  7. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式

    今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...

  8. ExtJs2.0学习系列(3)--Ext.Window

    ExtJs2.0学习系列(3)--Ext.Window 前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同 ...

  9. ExtJs2.0学习系列(1)--Ext.MessageBox

    随笔- 71  文章- 10  评论- 1096  ExtJs2.0学习系列(1)--Ext.MessageBox 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个 ...

最新文章

  1. 创业3年!猎头加价50%!一半中层骨干被挖走,研发就剩2个应届生!绝户套餐真够狠的!...
  2. Linux中的数据流重定向
  3. 显示lib包_【手把手教你】股市技术分析利器之TA-Lib(一)
  4. 性味归经与功能的脚本(超过四元素)
  5. ViewPager 详解(五)-----使用Fragment实现ViewPager滑动
  6. 无后端完成在线翻译功能
  7. oracle 不等于某类,Oracle如何查询不等于某数值
  8. wps流程图怎么不能添加文字_windows不能访问共享文件夹,不能添加共享打印机时,怎么解决呢...
  9. Cppcheck 1 54 C/C++静态代码分析工具
  10. php团队奖,PHP生成奖状
  11. c语言指数怎么表示_Assembly 浮点表示法
  12. pycharm 中文_环境搭建:3.pycharm社区版安装配置
  13. 学python还有机会吗_此时此刻,拥有一套全方面学习Python的机会是怎样一种体验?...
  14. RPM的原理及rpm命令常用参数
  15. Java语言实现word转PDF
  16. 新能源汽车电池健康状态及能耗分析
  17. 关于ps的图片的批处理
  18. GDB X命令详解
  19. 2018年存储设备趋势:NAS 朝企业级产品发展,SSD 界面复杂化
  20. 黑客与画家——片段一

热门文章

  1. spark job运行参数优化
  2. linux 下软READ 的使用和参数 以及 实现虚拟READ步骤
  3. ajax mvc3 razor 分页
  4. vs的form标签引起css走样问题
  5. 从渲染页面的角度来聊一聊浏览器的工作原理
  6. 一行命令快速安装Kubernetes(V1.18)高可用集群
  7. 在windows下挂载nfs文件系统
  8. 投屏时,客厅电视与客厅电视DMR的区别
  9. JDK1.8 中 ConcurrentHashMap源码分析(一)容器初始化
  10. 【Nginx那些事】nginx原理解析