Ext multiselect多选框

ifconfig

2013-12-20

在Ext里面经常会用到多选的组件： multiselect

我这里给出的是Ext 3.1.1的例子。里面有些地方需要注意，我会在下面进行说明

下面是HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>MultiSelect &amp; ItemSelector</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/>
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
    
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
    <script type="text/javascript" src="../../ext-all.js"> </script>

    <script type="text/javascript" src="../ux/MultiSelect.js"></script>
    <script type="text/javascript" src="../ux/ItemSelector.js"></script>
    
    <script type="text/javascript" src="multiselect-demo.js"></script>
    <script type="text/javascript" src="../shared/examples.js"></script>

</head>
<body>
    <h1>MultiSelect &amp; ItemSelector</h1>
    <p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>
    
    <b>MultiSelect</b><br />

    <p>Press Save with no items selected to see an example of validation applied.</p>
    <div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>
    
    <b>ItemSelector</b><br />
    <p>Supports drag and drop, double-click, button move/reorder, etc.
    <div id="itemselector" class="demo-ct"></div>
</body>
</html>

下面是JS

/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * [email protected]
 * http://www.extjs.com/license
 */
Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    /*
     * Ext.ux.form.MultiSelect Example Code
     */
    var msForm = new Ext.form.FormPanel({
        title: 'MultiSelect Test',
        width: 700,
        bodyStyle: 'padding:10px;',
        renderTo: 'multiselect',
        items:[{
            xtype: 'multiselect',
            fieldLabel: 'Multiselect<br />(Required)',
            name: 'multiselect',
            width: 250,
            height: 200,
            allowBlank:false,
            store: [[123,'One Hundred Twenty Three'],
                    ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                    ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
            tbar:[{
                text: 'clear',
                handler: function(){
	                msForm.getForm().findField('multiselect').reset();
	            }
            }],
            ddReorder: true
        }],
        tbar:[{
            text: 'Options',
            menu: [{
	            text: 'Set Value (2,3)',
	            handler: function(){
	                msForm.getForm().findField('multiselect').setValue('2,3');
	            }
	        },{
	            text: 'Toggle Enabled',
	            handler: function(){
	                var m = msForm.getForm().findField('multiselect');
	                if (!m.disabled) {
	                    m.disable();
	                } else {
	                    m.enable();
	                }
	            }
            }]
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(msForm.getForm().isValid()){
	                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
	                    msForm.getForm().getValues(true));
                }
            }
        }]
    });


    var ds = new Ext.data.ArrayStore({
        data: [[123,'One Hundred Twenty Three'],
            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
        fields: ['value','text'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

    /*
     * Ext.ux.form.ItemSelector Example Code
     */
    var isForm = new Ext.form.FormPanel({
        title: 'ItemSelector Test',
        width:700,
        bodyStyle: 'padding:10px;',
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            fieldLabel: 'ItemSelector',
	        imagePath: '../ux/images/',
            multiselects: [{
                width: 250,
                height: 200,
                store: ds,
                displayField: 'text',
                valueField: 'value'
            },{
                width: 250,
                height: 200,
                store: [['10','Ten']],
                tbar:[{
                    text: 'clear',
                    handler:function(){
	                    isForm.getForm().findField('itemselector').reset();
	                }
                }]
            }]
        }],

        buttons: [{
            text: 'Save',
            handler: function(){
                if(isForm.getForm().isValid()){
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                        isForm.getForm().getValues(true));
                }
            }
        }]
    });

});

【注意：】这里要说明的是，如何取得多选框中的数值的问题。

在Ext给出的例子中， msForm.getForm().getValues(true) 取值之后，

打印出来是： multiselect=1%2C2%2C3%2C4

这个结果是被decode之后的，可以顺利的放在url里面传给后台。

但是：如果我们需要在前台处理我们的选项，或者我们不想用上面给出的decode之后的结果传递给后台，该如何处理呢？

其实很简单，需要注意2个地方。

1、在 xtype: 'multiselect', 下面有表单的name的配置：name: 'multiselect',

这里的name，就是你取得数据的关键。

2、例子中取出数据的是这条语句：

msForm.getForm().getValues(true)

我们也需要对它进行改造。如下：

var selectItems = msForm.getForm().getValues().multiselect;