examples \ ux \ css \ images （这是选择按钮的图片资源）
examples \ ux \ css \ ItemSelector.css
examples \ ux \ form \ MultiSelect.js
examples \ ux \ form \ ItemSelector.js
<script src="/ExtJs/ux/MultiSelect.js"></script>
<script src="/ExtJs/ux/ItemSelector.js"></script>
<link href="/ExtJs/ux/css/ItemSelector.css" rel="stylesheet" />
{
xtype: "fieldset",
title: "选择仓库管理员",
columnWidth: .100,
style: "padding:10px;",
items: [
{
xtype: "panel",
layout: "fit",
cls: "panelBoder",
height:220,
items: [
{
xtype: ‘itemselector‘,
anchor: ‘100%‘,
id: ‘DrugsErpCompanyItemselector‘,
style:"margin-bottom:10px;",
//fieldLabel: ‘ItemSelector‘,
imagePath: ‘/ExtJs/ux/css/images/‘, //这是选择按钮的图片资源
store: "DrugsErpCompanyTableStore",
displayField: ‘CompanyName‘,
valueField: ‘DrugsErpCompanyTableId‘,
//value: [‘3‘, ‘4‘, ‘6‘], //默认选中项
allowBlank: false,
blankText: "必须选择至少一项",
msgTarget: ‘side‘,
fromTitle: ‘可选‘, //左边的选择框
toTitle: ‘已选‘ //右边的选择框
}
],
bbar: [
{
xtype: "pagingtoolbar",
store: "DrugsErpCompanyTableStore",
displayInfo: true,//是否显示分页的额外信息
displayMsg: ‘显示第 {0} 条到 {1} 条记录，一共 {2} 条‘,//displayInfo为true时，此属性才能生效
emptyMsg: "没有记录",
listeners: {
beforechange: function () {
Ext.getCmp("DrugsErpCompanyItemselector").fromField.store.removeAll(); //清空左侧选择框中的全部数据
//Ext.getCmp("DrugsErpCompanyItemselector").toField.store.removeAll(); //清空右侧选择框中的全部数据
}
}
}
]
}
]
}
#DrugsErpCompanyItemselector {
border: 1px solid #B5B8C8;
}
#DrugsErpCompanyItemselector .x-boundlist {
/*background: #DFEAF2;*/
}
#DrugsErpCompanyItemselector * {
border: none;
}
.panelBoder *{
border: none;
}
