ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持!
上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用。会涉及
到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵!
5.服务器数据作为ComboBox的数据源实例
首先从服务器获取json数据:
public string ServerData="['湖北','江西','安徽']";
//aspx前台js介绍代码
Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,//获取ServerData的string值,不要用""引起来,否则就不是object数据,而是字符串,这是一个很巧妙的关键点:把服务器的字符串转化为js的object数据,是不是超级方便。
emptyText:'请选择一个省份....',
applyTo: 'combo'
});
});
<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#后台带参数的方法
{
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的下拉框中去
核心参数介绍
核心代码:
//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篇)相关推荐
- ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox ...
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormP ...
- ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)
在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下! 其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解! 先来个简单的例子,以 ...
- ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)
N久没有写extjs的,作为一个新手,我为我的这种懒惰行为感到惭愧! 鉴于有朋友反应前面的文章过于简单,我决定以后的文章如果没有闪光点就放在新手区(如果不适合,请跟帖),不放在首页! 11.check ...
- ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树)
继续tree的learn! 今天就来个可增删改的树吧,操作数据库就使用比较方便的Linq,无非就是增删改! LinqData.dbml: html代码: <body><divid=& ...
- ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...
- ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(3)--Ext.Window 前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同 ...
- ExtJs2.0学习系列(1)--Ext.MessageBox
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(1)--Ext.MessageBox 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个 ...
最新文章
- 创业3年!猎头加价50%!一半中层骨干被挖走,研发就剩2个应届生!绝户套餐真够狠的!...
- Linux中的数据流重定向
- 显示lib包_【手把手教你】股市技术分析利器之TA-Lib(一)
- 性味归经与功能的脚本(超过四元素)
- ViewPager 详解(五)-----使用Fragment实现ViewPager滑动
- 无后端完成在线翻译功能
- oracle 不等于某类,Oracle如何查询不等于某数值
- wps流程图怎么不能添加文字_windows不能访问共享文件夹,不能添加共享打印机时,怎么解决呢...
- Cppcheck 1 54 C/C++静态代码分析工具
- php团队奖,PHP生成奖状
- c语言指数怎么表示_Assembly 浮点表示法
- pycharm 中文_环境搭建:3.pycharm社区版安装配置
- 学python还有机会吗_此时此刻,拥有一套全方面学习Python的机会是怎样一种体验?...
- RPM的原理及rpm命令常用参数
- Java语言实现word转PDF
- 新能源汽车电池健康状态及能耗分析
- 关于ps的图片的批处理
- GDB X命令详解
- 2018年存储设备趋势:NAS 朝企业级产品发展,SSD 界面复杂化
- 黑客与画家——片段一