这是本地读取数据。
<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 + "'}");
}
}
}
分享到:
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
4.2自带的itemselector,有问题,只有fromstore没有tostore,作了一些修改,可以使用,附件中有效果图
24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77
xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。 共:10 小节, ...
Extjs 5 学习笔记,在网上下载整理好的。
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
非常适合新手学习extjs的笔记,让你少走弯路
老师整理的extjs学习笔记,和大家共享
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
语言程序设计资料:ExtJs学习笔记-2积分.doc
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,