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 & 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 & 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;
这个 selectItems 就是我们要的数值。通过 alert(selectItems.constructor); 我们可以知道，selectItems 是一个字符串，里面的数值用逗号,进行了串联。我们来处理这个逗号,分割的字符串就可以得到一个数组。就是我们要的数值
相关推荐
xuewenke 0喜欢 / 0评论 2012-09-08
骆驼的自白 0喜欢 / 0评论 2019-04-08
89203856 0喜欢 / 0评论 2013-05-08
81751330 0喜欢 / 0评论 2012-09-17
courseware 0喜欢 / 0评论 2017-08-22
88491874 0喜欢 / 0评论 2017-05-02
nnj 0喜欢 / 0评论 2016-07-14
yaasshole 0喜欢 / 0评论 2014-02-21
草莓酱 0喜欢 / 0评论 2013-05-24