Javascript-extjs-itemselector

Introducing Extension Files

Extjs4.2 root directory:

examples \ UX \ CSS \ Images (This is the picture resource of the Select button)
examples \ ux \ CSS \ itemselector.css
examples \ ux \ form \ multiselect.js
examples \ ux \ form \ itemselector.js

I took the above files out and packaged them into the UX directory that I created myself in my project, not all of them using ExtJS's package, and then introducing the above files:

<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: "Select Warehouse Administrator",
columnWidth: .
style: "padding:10px;" ,
items: [
        {
xtype: "Panel",
layout: "Fit",
cls: "Panelboder",
height:
items: [
                {
xtype: ' itemselector ',
anchor: ' 100% ',
ID: ' drugserpcompanyitemselector ',
style:"margin-bottom:10px;" ,
//fieldlabel: ' Itemselector ',
imagePath: '/extjs/ux/css/images/', //This is the picture resource of the Select button
store: "Drugserpcompanytablestore",
Displayfield: ' CompanyName ',
Valuefield: ' Drugserpcompanytableid ',
//value: [' 3 ', ' 4 ', ' 6 '],//default check
allowblank: false,
blanktext: "must choose at least one item",
msgtarget: ' side ',
fromtitle: ' optional ', //Left selection box
totitle: ' selected ' //Right selection box
                }
            ],
bbar: [
                {
xtype: "Pagingtoolbar",
store: "Drugserpcompanytablestore",
displayinfo: true,//Whether to display additional information for paging
displaymsg: ' shows the {0} bar to {1} records, which is {2}in total,and//displayinfo is true, this property can be Effective
emptymsg: "no Records",
listeners: {
beforechange: function () {
Ext. GETCMP("Drugserpcompanyitemselector"). Fromfield. Store. RemoveAll(); //Clear all data in the left selection box
//ext.getcmp ("Drugserpcompanyitemselector"). ToField.store.removeAll ();//Clear all the numbers in the right selection box According
                        }
                    }
                }
            ]
        }
    ]
}

Select box Border Style

#DrugsErpCompanyItemselector {
Border: 1px solid #B5B8C8;
}

#DrugsErpCompanyItemselector . x-boundlist {
/*background: #DFEAF2; * *
}

#DrugsErpCompanyItemselector * {
Border: none;
}
            
. Panelboder *{
Border: none;
}

Javascript-Learning Total Directory

Javascript-extjs-itemselector