一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ExtMaster.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    
    <link href="../../Scripts/SuperBoxSelect/superboxselect.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/SuperBoxSelect/states.js" type="text/javascript"></script>
    <script src="../../Scripts/SuperBoxSelect/SuperBoxSelect.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <style type="text/css">
    body {
        font:13px/1.3 arial,helvetica,clean,sans-serif;
        *font-size:small;
        *font:x-small;
        padding: 20px !important;
    }
    #page {
        width: 700px;
    }
    p {
        color: #333;
        margin-bottom: 7px;
        font-size: 14px;
    }
    form p {
        margin-top: 7px;
    }
    code {
        color: #000;
    }
    #intro p {
        color: #000;
        font-size: 15px;
        margin-bottom: 20px;
    }
    h1 {
        font-size: 1.6em;
        line-height: 2.0em;
        margin-bottom: 0.8em;
    }
    h2 {
        font-size: 1.2em;
        line-height: 1.6em;
        margin-bottom: 0.6em;
    }
    .exForm{
        padding: 20px 20px 20px 0px;
        font-size: 12px;
    }
    .x-tag {
        color: #693;
        background-image: url(tag_green.gif);
        background-repeat: no-repeat;
        background-position:  2px center;
        padding-left: 17px !important;
        *text-indent: 17px !important;
    }
    .x-flag{
        background-image: url(../../Scripts/ext-3.4.0/resources/images/default/s.gif);
        background-repeat: no-repeat;
        background-position:  2px center;
        text-indent: 17px !important;
    }
    body.ext-ie6 .x-flag .x-superboxselect-item-close {
        top: 4px;
        right: 2px;
    }

    .small {
        font-size: small;
    }
    
    #f2Form .x-superboxselect-item-focus {
        color: #fff;
    }
    
</style>
    <script language="javascript" type="text/javascript">

        var tempIdCounter = 0;
        Ext.BLANK_IMAGE_URL = 'http://static.technomedia.co.uk/libs/ext-3.2.0/resources/images/default/s.gif';

        Ext.onReady(function () {


            $("#btnToastWindow").click(function () {

                GetWindow();

            });
        })

    </script>
    <script language="javascript" type="text/javascript">

        /**
        * ajax同步请求
        *获取用例对象
        */
        function GetSuperSelectData() {

            var obj;
            var value;
            var strUrl = '../SuoperBoxSelect/GetSuperSocketStore';

            if (window.ActiveXObject)
                obj = new ActiveXObject('Microsoft.XMLHTTP');
            else if (window.XMLHttpRequest)
                obj = new XMLHttpRequest;

            obj.open('POST', strUrl, false);
            obj.setRequestHeader('Contnent-Type', 'application/', 'application/x-www-form-urlencoded');
            obj.send(null);
            var oResult = Ext.util.JSON.decode(obj.responseText);

            return oResult;
        }
    
    </script>
    <script language="javascript" type="text/javascript">

        /**
        * form
        */
        function GetForm() {

            var SelectData = GetSuperSelectData();

            //example 5
            var states3 = new Ext.data.SimpleStore({
                fields: ['abbr', 'state', 'nick', 'cls'],
                data: SelectData,
                sortInfo: { field: 'state', direction: 'ASC' }
            });

            var superSelect = new Ext.ux.form.SuperBoxSelect({
                allowBlank: false,
                msgTarget: 'title',
                id: 'selector5',
                xtype: 'superboxselect',
                fieldLabel: 'States',
                resizable: true,
                hiddenName: 'statesHidden[]',
                 300,
                store: states3,
                mode: 'local',
                displayField: 'state',
                displayFieldTpl: '{state} ({abbr})',
                valueField: 'abbr',
                navigateItemsWithTab: false,
                value: ['AL', 'AZ']
            });

            var form = new Ext.form.FormPanel({
                frame: true,
                //title: '表单标题',
                style: 'margin:10px',
                items: [superSelect]
            });

            return form;

};

    /**
    * window
    */
    function GetWindow() {

        var form = GetForm();

        var win = new Ext.Window({
            title: '窗口',
             476,
            height: 374,
            items: [form],
            resizable: true,
            modal: true,
            closable: true,
            maximizable: true,
            minimizable: true,
            buttons: [{
                text: '确定',
                handler: function () {

                    var strValue = Ext.getCmp('selector5').getValue();
                    Ext.Msg.alert("提示", strValue);
                    win.close();
                }
            }, {
                text: '取消',
                handler: function () {

                    Ext.Msg.alert('提示', '取消');
                    win.close();
                }
            }]
        });

        win.show();

    }
    
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Example 5</h2>
    <p>
        This example demonstrates using <code>applyTo</code> to apply the component to an
        existing dom element.</p>
    <input type="button" id="btnToastWindow" value="弹出窗口" />
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Lucky.Models;

namespace Lucky.Controllers
{
    public class SuoperBoxSelectController : Controller
    {
        //
        // GET: /SuoperBoxSelect/

        public ActionResult Index()
        {
            return View();
        }

        #region 获取多选下拉列表数据源

        /// <summary>
        /// 获取多选下拉列表数据源
        /// </summary>
        /// <returns></returns>
        public JsonResult GetSuperSocketStore()
        {
            var lstDoubleSuperSelectData = new List<List<string>>();
            var lstSuperSelect = _GetSuperSocketStore();

            foreach(var oSuperSelect in lstSuperSelect)
            {
                var lstSuperSelectData = new List<string>();
                lstSuperSelectData.Add(oSuperSelect.abbr);
                lstSuperSelectData.Add(oSuperSelect.state);
                lstSuperSelectData.Add(oSuperSelect.nick);
                lstSuperSelectData.Add(oSuperSelect.cls);

                lstDoubleSuperSelectData.Add(lstSuperSelectData);
            }

            return Json(lstDoubleSuperSelectData,JsonRequestBehavior.AllowGet);
        }


        private List<CSuperSelect> _GetSuperSocketStore()
        {
            var lstSuperSelect = new List<CSuperSelect>();

            for (var iIndex = 0; iIndex < 10;iIndex++ )
            {
                var strAbbr = string.Format("{0}{1}","abbr",iIndex);
                var strState = string.Format("{0}{1}","state",iIndex);
                var strNick = string.Format("{0}{1}", "nick", iIndex);
                var strCls = string.Format("{0}{1}", "cls", iIndex);

                lstSuperSelect.Add(new CSuperSelect(strAbbr,strState,strNick,strCls));
            }

            return lstSuperSelect;
        }
        #endregion

    }
}

 public class CSuperSelect
    {
        public string abbr;
        public string state;
        public string nick;
        public string cls;

        public CSuperSelect(string abbr, string state, string nick, string cls)
        {
            this.abbr = abbr;
            this.state = state;
            this.nick = nick;
            this.cls = cls;
        }
    }