首页 JQuery/JavaScript ExtJS combo下拉菜单的属性说明以及获取值

ExtJS combo下拉菜单的属性说明以及获取值

作者:胡同里的砖头 围观群众:1344 更新于:2013-12-19

首先从服务器获取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的其他花俏功能在此不多做介绍

  • 本文标题: ExtJS combo下拉菜单的属性说明以及获取值
  • 文章分类:【JQuery/JavaScript】
  • 非特殊说明,本文版权归【胡同里的砖头】个人博客 所有,转载请注明出处.
留言评论
站点声明:
1、本站【胡同里的砖头】个人博客,借鉴网上一些博客模板,取其各优点模块自行拼装开发,本博客开发纯属个人爱好。
2、所有笔记提供给广大用户交流使用,可转载,可复制,纯个人开发所遇问题锦集记录使用
Copyright © huzlblog.com All Rights Reserved. 备案号:苏ICP备2021056683号-8