extjs4 ItemSelector

1. import js and css files into jsp:

<link rel="stylesheet" type="text/css"
   href="http://5.cdn.blog.com/wp-admin/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css"
   href="http://5.cdn.blog.com/wp-admin/ext/ux/css/ItemSelector.css" />

<script type="text/javascript"
    src="http://5.cdn.blog.com/wp-admin/ext/ext-all.js"></script>
<script type="text/javascript"
    src="http://5.cdn.blog.com/wp-admin/ext/ux/layout/component/form/MultiSelect.js"></script>
<script type="text/javascript"
    src="http://5.cdn.blog.com/wp-admin/ext/ux/layout/component/form/ItemSelector.js"></script>
<script type="text/javascript"
    src="http://5.cdn.blog.com/wp-admin/ext/ux/form/MultiSelect.js"></script>
<script type="text/javascript"
    src="http://5.cdn.blog.com/wp-admin/ext/ux/form/ItemSelector.js"></script>

2. define a store:
var rightStore = Ext.create('Ext.data.Store', {
		    fields: ['label', 'value'],
		    data : [
		        {"label":"A", "value":"A"},
		        {"label":"B", "value":"B"},
		        {"label":"C", "value":"C"},
		        {"label":"D", "value":"D"}

		    ]
		});
3. use like this:
{
	xtype: 'itemselector',
	id: 'modifyEBMulISelector',
	name: 'eright',
	width: 430,
	fieldLabel: '正确答案',
	imagePath: 'ext/ux/css/images',
	store:rightStore,
	dataFields:['label','value'],
	queryMode: 'local',
	displayField: 'label',
	allowBlank : false,
	blankText : '正确答案不可为空',
	valueField: 'value',
	legendTo:"已选项",
	legendFrom:"待选项",
	msgTarget: 'side'
}
4. if the item is used in modified form, it should be initialized.
but it seems that cannot auto-set, so i used a hidden area:
{
	xtype: 'hidden',
	id: 'modifyEBMulhid',
	name: 'erighthid'
}
then, set itemselector in load function:
mform.load({
	url: 'eqbase.do?method=modifyForm',
	params: {
		'selectId': selId
	},
	success: function(response,options){
		var erigh = Ext.getCmp('modifyEBMulhid').getValue();
		if(erigh!=null && erigh!=''){
			var righarr = erigh.split(",");
			Ext.getCmp('modifyEBMulISelector').setValue(righarr);
		}
	}
});
This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s