可输入可联想的下拉列表的实现——Ext ComboBox

 

    网上这样的控件不少,有很多实现方法,其中不少的很巧妙。

    例如:在文本框(HTML INPUT)后,添加一个隐藏层,隐藏层上放一个下拉列表,存储了所有可能的元素,每次文本框触发onpropertychange事件,就是对隐藏层上下拉列表数据的过滤显示。而选择下拉列表,则对文本框进行赋值......然后我们可以通过一些CSS技巧,将它的外观调整成一个可输入可联想下拉列表的模样。

    当然,本文并不打算对上述实现方式进行讨论,而是将EXT中一些实用的控件,“便宜地”添加到我们的项目中来(EXT版本1.1.1)。是的,我强调的是“便宜”!

    EXT上有一种控件ComboBox,就包含了这样的特性,而我们要使用它,标准的做法是:

    1. 首先,你需要将ext-1.1.1(如果你要使用它的样式,那么里面的resource是必须的——样式定义,以及它所依赖的图片都放在里面)添加到项目中来,在需要使用ComboBox的页面添加JS(必须)和CSS引用路径:

< link  rel ="stylesheet"  type ="text/css"  href ="../js/ext-1.1.1/resources/css/ext-all.css"   />

< script  type ="text/javascript"  src ="../js/ext-1.1.1/adapter/ext/ext-base.js" ></ script >
< script  type ="text/javascript"  src ="../js/ext-1.1.1/ext-all.js" ></ script >

    注意路径哦!

    2. 你需要一个载体,EXT就是这样,布局需要document.body,Grid需要<div>,而ComboBox则需要一个<input type="text">:

< input  type ="text"  id ="local1" />

    3. 新建一个JS文件,其间包括对存储结构的定义和ComboBox属性的定义:

Ext.onReady( function (){
        Ext.QuickTips.init();
    
        
var  data  =  
        [
                [
' 1 ' , ' Lislie ' , ' D005 ' , ' male ' ],
                [
' 2 ' , ' Merry ' , ' D004 ' , ' female ' ],
                [
' 3 ' , ' Edison ' , ' D003 ' , ' male ' ],
                [
' 4 ' , ' Mark ' , ' D002 ' , ' male ' ],
                [
' 5 ' , ' Leeon ' , ' D001 ' , ' male ' ]
        ];
 
        
//  格式化数据
     var  ds  =   new  Ext.data.Store({
                proxy: 
new  Ext.data.MemoryProxy(data),           //  数据源
        reader:  new  Ext.data.ArrayReader({}, [              //  如何解析
            {name:  ' id ' },
                        {name: 
' name ' },
                        {name: 
' depno ' },
                        {name: 
' sex ' }                               
        ])
        });
        ds.load();  
    
        
var  storeList  =   new  Ext.form.ComboBox({        
                store: ds,
                valueField:
' id ' ,      // option.value
                typeAhead: 
true ,
                displayField: 
' name ' ,      // option.text
                triggerAction: 
' all ' ,
                emptyText:
' Select a store... ' ,
                mode: 
' local ' ,
                selectOnFocus:
true ,
                width:
135
        });
    
        storeList.applyTo(
' local1 ' );
});

    上面的数据来源是一个写死的2维数组。同样的道理,你的数据源可以来自一个链接——请求一个页面,而该页面的Response返回一个符合Json格式的字符串(EXT里面最常用的存储方式是JSON),那么Ext.data.Store的定义就变成了这样:

var  store  =   new  Ext.data.Store({
        proxy:
new  Ext.data.ScriptTagProxy({    url: ' http://localhost:17319/KBS/Grid/EditString.aspx ' }),     //  数据源
        reader:  new  Ext.data.JsonReader({       //  解析格式
            totalProperty :  ' totalCount ' ,                 //  用于分页   
            root :  ' root ' ,
            id : 
' id '
        },
        [
                {name: 
' id ' },
                {name: 
' name ' },
                {name: 
' depno ' },
                {name: 
' sex ' }
        ])
});

    如此,需要请求页面返回的String符合这样的格式,例如:

{
        'totalProperty':100,
        'root':[
                {'id':'a1', 'name':'Lislie', 'depno':'D001', 'sex':'Male'},
                {'id':'a2', 'name':'Merry', 'depno':'D002', 'sex':'Female'},
                {'id':'a3', 'name':'Jone', 'depno':'D003', 'sex':'Female'},
                {'id':'a4', 'name':'Mark', 'depno':'D004', 'sex':'Male'}
        ]
}

    网上有不少将DataTable或Model转JSON的工具类,当然也也可以自己写,反射+字符串的拼接。

    3. 最后,将这个JS引用到页面上。那么一个可输入可联想的控件便出来了。这里有一个小的BUG(暂且用这个词吧),ComboBox终究是放在一个<input>上。

    在前台,你可以通过storeList.getValue()获取当前的选中项的option.value(如果是手动输入的项,而非经过联想选中的项,storeList.getValue()得到的是'',你只能获取到storeList.getRawValue()即<input>的value。需要在点击保存按钮时,在onclick事件中将两者的值设置为一致:“οnclick='javascript:storeList.setValue(storeList.getRawValue);'”)。

    而在后台,你无法像操作<select>一样,获取它的option.value,而只得到它的text。也只能操作这个Text了。

    总结:如果你的数据库操作放在前台,那么你完全可以将ComboBox当成一个<select>(功能更强大,允许你输入不存在的项)。如果你的数据库操作放在后台,那么,你只能操作它的Text了,而所谓的可联想、可输入下拉列表,其实是一个糊弄人的文本框而已。

    ------------------------------------------------------------------------------

    老实说,上面的实现过程还是很麻烦,这里有一个很简单的实现方式——其实EXT研发小组已经替我们完成了这一步,是的,仔细看API,你会发现:

    你可以将一个带数据的<select>轻松的转化为ComboBox,哪怕它是asp的控件<asp:DropdownList>。而这个转化过程,就是ComboBox的一行属性:

var  storeList;

Ext.onReady(
function (){
        Ext.QuickTips.init();
        storeList 
=   new  Ext.form.ComboBox({    
                typeAhead: 
true ,
                triggerAction: 
' all ' ,
                emptyText:
' Select a store... ' ,
                mode: 
' local ' ,
                selectOnFocus:
true ,
                transform:
' AList ' ,          //  将已存在select(通过id)直接转ComboBox
                width: 135
        });
})

   缺陷是,手动输入的不存在的项,在后台无法取到。

    两种方式区别:由于载体的不同,一个<input>,一个<select>,导致在后台,我们取值方法和取的内容也不同。虽然说,两者在外观和功能上一模一样,但后者才能真正算可输入可联想的下拉列表吧!

    附(效果图)

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页