天我们接着深入解析表单元素中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类型。
这里我们介绍了两个新的参数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的其他花俏功能在此不多做介绍。
分享到:
相关推荐
在EXTJS 3.x版本中,Combobox是一个非常实用的组件,它提供了下拉列表功能,用户可以在输入框中输入文字,系统会根据输入内容自动进行模糊匹配,给出相关的建议选项。这种功能在数据筛选、搜索或者选择项较多时特别...
ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个...如果需要深入学习,建议查看官方文档和更多相关的博客文章,例如给出的博文链接,那里可能有更详尽的解释和示例。
通过调整相关参数,如`queryDelay`和`minChars`,可以优化用户体验和性能。 最后,为了进一步提升性能和用户体验,可以考虑以下优化策略: - 使用分页来限制一次加载的数据量,避免一次性加载大量数据导致页面卡顿...
ExtJS 的 ComboBox 组件是用于创建下拉列表的常用控件,它允许用户从一组预定义的选项中选择一个值。在本文中,我们将深入探讨如何设置 ComboBox 的默认值、如何使用服务器数据作为数据源以及 ComboBox 数据源 store...
此外,EasyUI 还兼容 HTML5,通过 data-options 属性可以方便地配置组件参数。 使用 jQuery EasyUI 开发产品可以显著节省时间和资源,因为它已经封装了许多底层的实现细节。同时,框架本身支持扩展,开发者可以根据...