ExtJs4学习笔记(五) comboBox使用方法及扩展

一本正经地胡闹 2019-06-13

展开全文

基础用法

首先介绍最基础的用法，效果类似用html中的select但是提供后台加载方法，下面来看下代码：

Ext.onReady(function(){
        	//模拟数据，如果需要后台加载直接用proxy即可
		 var store=Ext.create('Ext.data.Store',{	 
		 	fields:['text','value'],
		 	data:[{
		 		"text":"天津",
		 		"value":"tj",
		 	},{
		 		"text":"北京",
		 		"value":"bj",
		 	},{
		 		"text":"上海",
		 		"value":"sh",
		 	}]
		 });
		 Ext.create('Ext.form.ComboBox',{
		 	fieldLabel: '城市',
		    store: store,//数据
		    queryMode: 'local',//加载本地数据
		    displayField: 'text',//显示的字段，对应store中的text值
		    valueField: 'vaule',//实际传递到后台的值
		    renderTo: Ext.getBody()//直接输出到body中
		 })
	})

效果如图：

下拉树

这里用到了一个官方的拓展Ext.ux.TreePicker，在Ext中的example文件夹中会有一个ux文件夹，将整个文件夹拷贝到自己项目的ExtJs的src文件夹下，没看懂路径也不要紧，直接引用Ext.ux.TreePicker会提示路径错误，这时候吧ux放到他提示的路径即可。由于下拉树需要读取后台信息，所以这里用到了.net mvc4，下面贴上代码。

前台页面js

    Ext.onReady(function () {
        Ext.onReady(function () {
            var combo=Ext.create('Ext.ux.TreePicker', {
                url: 'home/getComboBox',//获得数据的地址
                displayField: 'text',//显示的文本
                valueField: 'id',//提交表单后传递到后台的值
                renderTo: Ext.getBody()
            })
            console.info(combo);
        })
    })

后台tree实体类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Extjs4Demo.Models
{
    public class Tree
    {
        public string id { set; get; }
        public string text { set; get; }
        public bool leaf { set; get; }
        public Tree children { set; get; }
    }
}

后台controller

 public ActionResult getComboBox()
        {
            Tree tree1=new Tree(){id="t001",leaf=true,text="测试树节点01"};
            Tree tree2=new Tree(){id="t002",leaf=true,text="测试树节点02"};
            Tree tree3=new Tree(){id="t003",leaf=true,text="测试树节点03"};
            Tree tree4=new Tree(){id="t004",leaf=true,text="测试树节点04"};
            Tree tree5=new Tree(){id="t005",leaf=true,text="测试树节点05"};
            List<Tree> list=new List<Tree>();
            list.Add(tree1);
            list.Add(tree2);
            list.Add(tree3);
            list.Add(tree4);
            list.Add(tree5);
            return Json(list, JsonRequestBehavior.AllowGet);
        }

下面是效果图：

下拉Grid

待续

多选下拉列表

其实官方提供了一个多选列表，但是我们发现官方示例并不好用，因为当我们进行多选后，再打开多选菜单原来被选中的项并没有被标注，而且comboxBox中可以用delete删除comoboBox。

那么我们来说下新找到的这个扩展究竟有什么优点。

1.选中后会在列表中高亮选中

2.在列表中点击已被选中项，会取消选中，并删除combox对用数据

3.支持在选项前添加图标

4.支持双击combox中选中项来取消选中

5.支持一件删除所有选中

6.档选中项超出列表时会自动拉伸，以适应多选。

更多优点就不赘述，下面贴上官方地址http://www./forum/showthread.php?195773-Ext.ux.ComboFieldBox-intuitive-multi-select-combobox-for-4.1，虽然上面说支持4.1但实际4.2也是支持的。

首选需要导入对应js和css

js不需要手动导入，只需要将2个js文件放入项目js文件夹src/ux中即可ComboFieldBox.css需要手动导入

Ext.onReady(function () {
    //自定义model
    Ext.define('State', {
        extend: 'Ext.data.Model',
        fields: [
            { type: 'string', name: 'abbr' },
            { type: 'string', name: 'name' },
            { type: 'string', name: 'slogan' },
            { type: 'string', name: 'iconCls' }
        ]
    });
    //模拟数据
    var states = [
        { "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
        { "abbr": "FR", "name": "France", "slogan": "Sarkozy will never be elected again. French people are not that stupid!", iconCls: 'x-icon-fr' },
        { "abbr": "AU", "name": "Australia", iconCls: 'x-icon-au' },
        { "abbr": "AT", "name": "Austria", iconCls: 'x-icon-at' },
        { "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
        { "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
        { "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
        { "abbr": "CA", "name": "California", "slogan": "The Golden State" },
        { "abbr": "CO", "name": "Colorado", "slogan": "The Mountain State" },
        { "abbr": "CT", "name": "Connecticut", "slogan": "The Constitution State" },
        { "abbr": "IA", "name": "Iowa", "slogan": "The Corn State" },
        { "abbr": "LT", "name": "Long test to see if it gets ellipsifyed", "slogan": "The Constitution State" }
    ];
    //自定义store
    var store = Ext.create('Ext.data.Store', {
        model: 'State',
        data: states,
        storeId: 'storeId'
    });
    var comboFieldBox2 = Ext.create('Ext.ux.ComboFieldBox', {
        displayField: 'name',//显示字段
        value: ['AK', 'CT'],//默认选中
        iconClsField: 'iconCls',//图标
        valueField: 'abbr',//传递到后台字段
        width: 500,//宽度
        labelWidth: 130,//标题宽度
        store: store,//store
        queryMode: 'local',//本地数据
        forceSelection: false,
        renderTo: 'mul'
    });
})