ExtJs学习笔记（1）ItemSelector （用户关系左右选择组件）

SunnyYoona

浏览: 386630 次

最近访客更多访客>>

blacknike8294

RedBlood

songling

searchtree

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这是本地读取数据。

<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 + "'}");
        }
    }
}

分享到：