ExtJS 4.0自带的插件itemselector的store，值如何动态改变啊？ - ITeye问答
fieldLabel: 'keyword',
listeners:{
change: function(textfield, value){//我的意图是，这个值变的时候，在下面列表里刷新product_store，达到筛选的目的，但store是刷新了，但itemselector左边框框里没有变过来
product_store.load({
query: "37"
fieldLabel: 'product list',
name: 'products_ids',
id: 'products_ids',
xtype: 'itemselector',
allowBlank: false,
store: product_store,
displayField: 'model',
valueField: 'id',
hideNavIcons: true,
msgTarget: 'side'
程序开始的时候用autoLoad可以让itemselector左边框框里有初始值：
var product_store = Ext.create('Ext.data.Store', {
model: 'Product',
storeId: 'AllProduct',
autoLoad: {
query: "670"
问题补充：renpeng301 写道 贴个图吧？然后描述下啊
因为赶时间，所以已经采用别的方式，所以自己的图就没有了……
官方的例子在这里：
/deploy/ext-4.0.2a/examples/multiselect/multiselect-demo.html
问题补充：renpeng301 写道 哦 明白了 你的意思，available的数据，根据关键字动态改变？
&&& 解决了？？
没有解决，改了想法，用了一个输入提示的combobox和一个grid。但总觉得这个东东应该是能改的吧……
采纳的答案
4.0中好像没有fromMultiselect
/javascript/226007.html（刷新selector）
用 bindStore方法添加store
我也遇到了这个问题，已经解决了！修改了一些itemSelector.js的代码：
在 53 行 注释掉 me.bindStore(me.store);
initComponent: function() {
me.ddGroup = me.id + '-dd';
me.callParent();
// bindStore must be called after the fromField has been created because
// it copies records from our configured Store into the fromField's Store
// me.bindStore(me.store);
将56行修改成
createList: function(title, isStore){
if(isStore) {
store = me.
model: me.store.model,
return Ext.create('Ext.ux.form.MultiSelect', {
submitValue: false,
dragGroup: me.ddGroup,
dropGroup: me.ddGroup,
title: title,
store: store,
displayField: me.displayField,
disabled: me.disabled,
listeners: {
boundList: {
scope: me,
itemdblclick: me.onItemDblClick,
drop: me.syncValue
将 87 行代码修改成
setupItems: function() {
me.fromField = me.createList(me.fromTitle, true);
me.toField = me.createList(me.toTitle, false);
之后外面直接
itemSeletor.store.load()就ok了！
哦 明白了 你的意思，available的数据，根据关键字动态改变？
&&& 解决了？？
贴个图吧？然后描述下啊
已解决问题
未解决问题extjs控件ItemSelector
在js中使用ItemSelector这个控件，引入的扩展文件MultiSelect.js会报错，&initComponent: function(){
&&&&&&& var me =
&&&&&&& me.bindStore(me.store, true);
me.store为null，不知道怎么回事
我的js代码如下，两个store都定义了啊
var rolefromStore = new Ext.data.JsonStore({
&& &&& &&& &proxy: new Ext.data.HttpProxy({
&& &&& &&& &&& &url: '/manager/systemManager/getSelfRoles?grouId' + groupid
&& &&& &&& &}),
&& &&& &&& &root: 'root',
&& &&& &&& &fields: ['id','roleName']
&& &&& &});
&& &&& &rolefromStore.load();
&& &&& &var roletoStore = new Ext.data.JsonStore({
&& &&& &&& &proxy: new Ext.data.HttpProxy({
&& &&& &&& &&& &url: '/manager/systemManager/getOtherRoles?grouId' + groupid
&& &&& &&& &}),
&& &&& &&& &root: 'root',
&& &&& &&& &fields: ['id','roleName']
&& &&& &});
&& &&& &roletoStore.load();
&& &&& &&& &&& &&& &&& &&& &&& &xtype:'itemselector',
&& &&& &&& &&& &&& &&& &&& &&& &name:'itemselector',
&& &&& &&& &&& &&& &&& &&& &&& & multiselects: [{
&& &&& &&& &&& &&& &&& &&& &&& &width:150,
&& &&& &&& &&& &&& &&& &&& &&& &height:260,
&& &&& &&& &&& &&& &&& &&& &&& &legend:'可选条目',
&& &&& &&& &&& &&& &&& &&& &&& &store: rolefromStore,
&& &&& &&& &&& &&& &&& &&& &&& &displayField:'id',
&& &&& &&& &&& &&& &&& &&& &&& &valueField:'roleName'
&& &&& &&& &&& &&& &&& &&& &&& &&& &},
&& &&& &&& &&& &&& &&& &&& &&& &{
&& &&& &&& &&& &&& &&& &&& &&& &width:150,
&& &&& &&& &&& &&& &&& &&& &&& &height:260,
&& &&& &&& &&& &&& &&& &&& &&& &hideLabel:true,
&& &&& &&& &&& &&& &&& &&& &&& &legend:'已选条目',
&& &&& &&& &&& &&& &&& &&& &&& &store:roletoStore,
&& &&& &&& &&& &&& &&& &&& &&& &displayField:'id',
&& &&& &&& &&& &&& &&& &&& &&& &valueField:'roleName',
&& &&& &&& &&& &&& &&& &&& &&& &tbar:[{
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &text:'清空',
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &iconCls:'remove',
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &handler:function(b,e){
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &Ext.getCmp('re_winform').getForm.findField('itemselector').reset();
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &}
&& &&& &&& &&& &&& &&& &&& &&& &&& &&& &}]
&& &&& &&& &&& &&& &&& &&& &&& &&& &}]
十有八九都是异步的问题，load函数式异步的。
试试autoload属性吧extJS-itemselector的使用 - 廉颇老矣，尚能饭否？ (jdk+算法+spring+netty+大数据+OS+Architect) - ITeye博客
博客分类：
上图是富客户端界面中常用的选择方式，下面是项目中的一段示例代码，仅供初学者参考：
var _smsTemplateToStore = new Ext.data.Store({
id:"_smsTemplateToStore",
proxy : new Ext.data.HttpProxy({url:"modelSelectedData.jsp"}),
reader: new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:"root"},
{name:"code"},
{name:"desc"}
var _smsTemplateFromStore = new Ext.data.Store({
id:"_smsTemplateToStore",
proxy : new Ext.data.HttpProxy({url:"moduleUnSelectedData.jsp"}),
reader: new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:"root"},
{name:"code"},
{name:"desc"}
var _toolbarStudyClassTypeNodes = new Ext.Toolbar({
text:"保存",
pressed : true,
iconCls : 'icon-table-save',
handler:function(){
saveRelation();
var isForm = new Ext.form.FormPanel({
title: '班型-模块列表选择',
//width: bodyWidth-180,
height: 340,
bodyStyle: 'padding:5',
tbar:_toolbarStudyClassTypeNodes,
xtype:"itemselector",
name:"itemselector",
fieldLabel:"信息",
//labelWidth:1,
dataFields:["code", "desc"],
toData:[],
msWidth:220,
msHeight:260,
valueField:"code",
displayField:"desc",
imagePath:"../images/",
toLegend:"已选择",
fromLegend:"待选择",
fromData:[],
fromStore:_smsTemplateFromStore,
toStore:_smsTemplateToStore
var _panelStudyClassTypeNodes = new Ext.Panel({
collapsible:true,
width:bodyWidth-180,
height:350,
autoScroll:true,
items:[isForm]
charles751
浏览: 542781 次
来自: 北京
对于初学者来说，这样编写可能会误导，理解更烦锁。
startThreads(rand ...
谢谢博主，学习了
大神厉害啊 可以了这是本地读取数据。
&meta http-equiv=&Content-Type& content=&text/ charset=GB2312&&
&title&Tree&/title&
&link rel=&stylesheet& type=&text/css& href=&.
这是本地读取数据。
&meta http-equiv="Content-Type" content="text/ charset=GB2312"&
&title&Tree&/title&
&link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /&
&link rel="stylesheet" type="text/css" href="MultiSelect.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="MultiSelect.js"&&/script&
&script type="text/javascript" src="ItemSelector.js"&&/script&
&script type="text/javascript"&
Ext.onReady(function()
var leftStore = new Ext.data.ArrayStore(
['1', '卡卡'],
['2', '罗纳尔多'],
['3', '梅西'],
['4', '罗纳尔迪尼奥'],
['5', '阿奎罗'],
['6', '本泽马'],
['7', '哈维'],
['8', '比利亚'],
['10', '小豌豆'],
['11', '特略'],
['12', '法尔考'],
['13', '苏亚雷斯']
fields: ['id','name'],
sortInfo: {
field: 'name',
direction: 'ASC'
var rightStore = new Ext.data.ArrayStore(
['1', 'C罗'],
['2', '内马尔'],
['3', '法布雷加斯']
fields: ['id','name'],
sortInfo: {
field: 'name',
direction: 'ASC'
var userForm = new Ext.form.FormPanel(
xtype : 'itemselector',
id:'userSelector',
anchor : '100%',
name : 'userSelector',
hideLabel : true,
renderTo:'ItemSelector',
style : 'margin-top:10margin-left:10margin-right:10',
imagePath : 'images/',
multiselects : [
id:'left',
width : 150,
height : 250,
legend :'待选人员',
store :leftStore,
valueField : 'id',
displayField : 'name'
id:'right',
width : 150,
height : 250,
legend : '已选人员',
store:rightStore,
valueField : 'id',
displayField : 'name',
text : '清除',
handler : function() {
userForm.getForm().findField('userSelector').reset();
&div id="ItemSelector" style="height:300"&&/div&
在使用ItemSelector时需要引用3个文件：
按照以上代码就可以使用读取本地数据的用户选择组件了。
如果想读取后台数据，还需要稍微改动一下store。
//待选人员数据
var leftStore = new Ext.data.Store(
id:'leftStore',
proxy : new Ext.data.HttpProxy({url:"/Web/Manage/DeskTop/JSON/CommonFile/UserSelector.aspx"}),
reader: new Ext.data.JsonReader(
totalProperty:'totalCount',
root:'root'
{name:'id',type:'int'},
{name:'name',type:'string'}
leftStore.load();
url中的地址就是用来读取后台数据的。
UserSelector.aspx
using System.C
using System.C
using System.D
using System.L
using System.W
using System.Web.S
using System.Web.UI;
using System.Web.UI.HtmlC
using System.Web.UI.WebC
using System.Web.UI.WebControls.WebP
using System.Xml.L
using System.Data.SqlC
using System.T
public partial class Manage_DeskTop_JSON_CommonFile_UserSelector : System.Web.UI.Page
private int count = 0;
private SQL sqlManage =
private StringBuilder sb = new StringBuilder();
private StringBuilder jsonBody = new StringBuilder();
private string sql =
private SqlDataReader sr =
private bool IsS
private string error =
protected void Page_Load(object sender, EventArgs e)
sqlManage = new SQL();
sql = "select Id,UserName from UserInfo";
sr = sqlManage.getDataReader(sql);
jsonBody.Append("root:[");
while (sr.Read())
if (count != 0)
jsonBody.Append(",");
jsonBody.Append("{");
jsonBody.AppendFormat("id:'{0}',name:'{1}'", sr[0].ToString(), sr[1].ToString());
jsonBody.Append("}");
jsonBody.Append("]");
this.IsSuccess =
catch (Exception exp)
this.IsSuccess =
error = exp.M
if (this.IsSuccess == true)
sb.Append("{");
sb.AppendFormat("totalCount:{0}", count);
sb.Append(",");
sb.Append(jsonBody);
sb.Append("}");
Response.Write(sb);
Response.Write("{success:false,error:'" + error + "'}");
版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至： 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
用云栖社区APP，舒服~
【云栖快讯】首届阿里巴巴中间件技术峰会，揭秘阿里10年分布式技术沉淀！阿里高可用体系核心缔造者、全链路压测创始人，DRDS与TDDL负责人等大咖出场，干货分享，不可错过！&&
阿里云机器学习是基于阿里云分布式计算引擎的一款机器学习算法平台。用户通过拖拉拽的方式可视化的操作组件来进行试验，...
一种稳定、可靠、容量和服务能力可弹性伸缩的分布式关系型数据库服务。
帮助您基于阿里云构建出一个隔离的网络环境。您可以完全掌控自己的虚拟网络，如选择自有 IP 地址范围、划分网段、配...
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
2017杭州云栖大会火热抢票
Loading...(转)Extjs 中的ItemSelector - Se7en - ITeye博客
博客分类：
一 Extjs中的插件ItemSelector，使用中的注意事项
&& 使用中需要引用3个文件，MultiSelect.js ，ItemSelector.js，MultiSelect.css
二、参考官方示例程序，中文表现为乱码，需要将以上文件，另存为utf-8格式
三、官方示例程序程序中，如果不做修改，只能获取displayText
四、如果采用json从后台获取，不能自定义displayField和valueField属性,否则在接受框没有选择的值出现.
& 因笔者通过SQL语句以value text方式，发现数据库不允许这样操作，提示为系统保留字符存在，例如以下语句：
& select sId as value,Stext as text from xxx
为此，对该插件，笔者修改一下几个地方，可以完善：
1：修改MultiSelect.js插件,将使用value 和text位置，变更为_value& _text,主要是以下位置
if(Ext.isArray(this.store)){
if (Ext.isArray(this.store[0])){
this.store = new Ext.data.ArrayStore({
fields: ['_value','_text'],
data: this.store
this.valueField = '_value';
this.store = new Ext.data.ArrayStore({
fields: ['_text'],
data: this.store,
expandData: true
this.valueField = '_text';
this.displayField = '_text';
this.store = Ext.StoreMgr.lookup(this.store);
//后台返回的字段为_value 和_text,例如：
//select sID as _value,Stext as _text from XXX等语句
//采用json获取数据代码可参考一下方式：
var DSformstore=new Ext.data.Store({
baseParams:{classid:classid},
//带有参数
autoLoad:true,
autoDestroy:true,
proxy:new Ext.data.HttpProxy({
method:'GET',
url:'GetPowerList.asp?Action=GetGParray&'
reader:new Ext.data.JsonReader({
},['_value','_text'])
//接受框store ,定义如下:
var storeTo = new Ext.data.ArrayStore({
fields: ['_value', '_text']
2: 为获取选择框的value值，需要修改ItemSelector的setValue()函数，笔者代码参考以下网址：
http://abgne.tw/ext-js/ext-js-tips/itemselector-setvalue-item.html
Ext.override(Ext.ux.form.ItemSelector, {
setValue: function(values) {
var selectionsArray = [];
this.toMultiselect.view.clearSelections();
this.hiddenField.dom.value = '';
if (!values || (values == '')) { }
if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
for (var i=0; i&values. i++) {
index = this.fromMultiselect.view.store.indexOf(this.fromMultiselect.view.store.query(this.fromMultiselect.valueField, new RegExp('^' + values[i].trim() + '$', "i")).itemAt(0));
if (index & -1) {
selectionsArray.push(index);
var records = [],
if (selectionsArray.length & 0) {
for (var i=0; i&selectionsArray. i++) {
var record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
if(!this.allowDup)selectionsArray = [];
for (var i=0; i&records. i++) {
record = records[i];
if(this.allowDup){
var x=new Ext.data.Record();
record.id=x.
this.toMultiselect.view.store.add(record);
this.fromMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
var si = this.toMultiselect.store.sortI
this.toMultiselect.store.sort(si.field, si.direction);
this.toMultiselect.view.select(selectionsArray);
3：具体使用方法举例如下：（这里直接是应用官方示例程序，没有使用json从后台获取数据，同时也没有修订value 及text为_value _text
var dsform = 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'
var dsto = new Ext.data.ArrayStore({
fields: ['value', 'text']
var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10',
renderTo: 'itemselector',
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 180,
height: 200,
store: dsform ,
displayField: 'text',
valueField: 'value'
width: 150,
height: 200,
store: dsto,
displayField: 'text',
valueField: 'value',
text: '清除选择项目',
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));
运行结果如下
可以获取value值，而非displayText
浏览: 49915 次
都是把API翻译下，。。。。无语！！}