ExtJs学习笔记（1）ItemSelector （用户关系左右选择组件）
这是本地读取数据。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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(
{
data: [
['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(
{
data: [
['1', 'C罗'],
['2', '内马尔'],
['3', '法布雷加斯']
],
fields: ['id','name'],
sortInfo: {
field: 'name',
direction: 'ASC'
}
});
var userForm = new Ext.form.FormPanel(
{
items : [
{
xtype : 'itemselector',
id:'userSelector',
anchor : '100%',
name : 'userSelector',
hideLabel : true,
renderTo:'ItemSelector',
style : 'margin-top:10px;margin-left:10px;margin-right:10px;',
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',
tbar : [
{
text : '清除',
handler : function() {
userForm.getForm().findField('userSelector').reset();
}
}]
}
],
}]
});//form
}
);
</script>
</head>
<body>
<div id="ItemSelector" style="height:300px;"></div>
</body>
</html>
在使用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;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Text;
public partial class Manage_DeskTop_JSON_CommonFile_UserSelector : System.Web.UI.Page
{
private int count = 0;
private SQL sqlManage = null;
private StringBuilder sb = new StringBuilder();
private StringBuilder jsonBody = new StringBuilder();
private string sql = null;
private SqlDataReader sr = null;
private bool IsSuccess;
private string error = null;
protected void Page_Load(object sender, EventArgs e)
{
try
{
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("}");
count++;
}
jsonBody.Append("]");
this.IsSuccess = true;
}
catch (Exception exp)
{
this.IsSuccess = false;
error = exp.Message;
}
if (this.IsSuccess == true)
{
sb.Append("{");
sb.AppendFormat("totalCount:{0}", count);
sb.Append(",");
sb.Append(jsonBody);
sb.Append("}");
Response.Write(sb);
}
else
{
Response.Write("{success:false,error:'" + error + "'}");
}
}
}