ExtJS MultiselectItemSelector的使用 示例
效果：
创建调用的HTML：
<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="examples.css"/>
<link rel='stylesheet' type='text/css' href='./Multiselect.css'>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="./Multiselect.js"></script>
<script type="text/javascript" src="./DDView.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
/*
* Ext.ux.Multiselect Example Code
*/
var formMultiselect = new Ext.form.FormPanel({
labelWidth: 75,
labelAlign: "right",
width:700,
items:[{
xtype:"multiselect",
fieldLabel:"Multiselect",
name:"multiselect",
dataFields:["code", "desc"],
data:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
valueField:"code",
displayField:"desc",
width:250,
height:200,
allowBlank:true,
legend:"Multiselect",
tbar:[{text:"clear",handler:function(){formMultiselect.getForm().findField("multiselect").reset();}}]
}],
buttons:[{
text:"Get Value",
handler: function(){
alert(formMultiselect.getForm().getValues(true));
}
},{
text:"Set Value (2,3)",
handler: function(){
formMultiselect.getForm().findField("multiselect").setValue("2,3");
}
},{
text:"Mark Invalid",
handler: function(){
formMultiselect.getForm().findField("multiselect").markInvalid("Invalid");
}
},{
text:"Toggle Enabled",
handler: function(){
var m=formMultiselect.getForm().findField("multiselect");
if (!m.disabled)m.disable();
else m.enable();
}
},{
text:"Reset",
handler: function(){
formMultiselect.getForm().findField("multiselect").reset();
}
}]
});
formMultiselect.render("form-ct-multiselect");
/*
* Ext.ux.ItemSelector Example Code
*/
var formItemSelector = new Ext.form.FormPanel({
labelWidth: 75,
width:700,
items:[{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
//imagePath:"ext-ux/multiselect",
//switchToFrom:true,
toLegend:"Selected",
fromLegend:"Available",
toTBar:[{
text:"Clear",
handler:function(){
var i=formItemSelector.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}],
buttons:[{
text:"Get Value",
handler: function(){
alert(formItemSelector.getForm().getValues(true));
}
},{
text:"Mark Invalid",
handler: function(){
formItemSelector.getForm().findField("itemselector").markInvalid("Invalid");
}
}]
});
formItemSelector.render("form-ct-itemselector");
});
</script>
<div style="width:800px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct-multiselect"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<br><p>
<div style="width:800px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct-itemselector"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</body>
</html>
备注：
组件的源文件、css文件、图片见附件。
扫一扫
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
