新手,废了蛮多时间才把ext.form.combobox的联动做出来了,与大家分享,希望可以帮到大家。
效果图:
先上代码:JS文件
///<reference path="vswd-ext_2.0.2.js" />
Ext.onReady(function () {
Ext.define("comboboxdata1", {
extend: "Ext.data.Model",
fields: [
"tbname", "tbdesc"
]
});
var store1 = Ext.create("Ext.data.Store", {
storeId: "store1",
model: "comboboxdata1",
proxy: {
type: "ajax",
url: "ComboData.ashx",
reader: {
type: "json",
root: "root"
}
}
});
Ext.define("comboboxdata2", {
extend: "Ext.data.Model",
fields: [
"listname", "listdesc", "tbname"
]
});
var store2 = Ext.create("Ext.data.Store", {
storeId: "store2",
model: "comboboxdata2",
proxy: {
type: "ajax",
url: "ComboData1.ashx",
reader: {
type: "json",
root: "combo2root"
}
}
});
store2.load();
var store3 = Ext.create("Ext.data.Store", {
fields: [
"listname", "listdesc", "tbname"
]
});
var combo1 = Ext.create("Ext.form.ComboBox", {
id: "c1",
valueField: "tbname",
fieldLabel: "选择条件",
store: store1,
displayField: "tbdesc",
listeners: {
change: function (f, n, o) {
store3.removeAll();
combo2 = Ext.getCmp("c2");
combo2.reset();
combo3 = Ext.getCmp("c3");
combo3.reset();
store2.each(function (record) {
//过滤表列名
if (record.get('tbname') == n) {
store3.add(record);
};
});
}
}
});
var combo2 = Ext.create("Ext.form.ComboBox", {
id: "c2",
store: store3,
queryMode: 'local',
valueField: "listname",
displayField: "listdesc"
});
var combo3 = Ext.create("Ext.form.ComboBox", {
id: "c3",
store: store3,
queryMode: 'local',
valueField: "listname",
displayField: "listdesc"
});
var selectbut = Ext.create('Ext.Button', {
text: '搜索',
handler: function () {
var listname2 = Ext.getCmp('c2').getValue();
var listname3 = Ext.getCmp('c3').getValue();
//排除为null时,赋值为""
if (!listname2) {
sexCode = "";
}
if (!listname3) {
nameCode = "";
}
alert("listname2:" + listname2 + "\nlistname3:" + listname3);
}
});
var tb = Ext.create("Ext.toolbar.Toolbar",
{ renderTo: "combo1", items: [
combo1, combo2,combo3,selectbut]
});
});
后台读出来的数据
Store1的数据:
{root:[{"tbname":"vw_ccx","tbdesc":"员工信息表"},{"tbname":"itemTurnoverMsg","tbdesc":"员工物品进出表"},{"tbname"
:"message_2D","tbdesc":"员工物品登记表"}]}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Text;
using System.Web.Script.Serialization;
using System.Data.SqlClient;
namespace extjstest_CShape
{
/// <summary>
/// ComboData 的摘要说明
/// </summary>
public class ComboData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/javascript";
string connstr = ConfigurationManager.ConnectionStrings["ItemManageSystemConnectionString2"].ConnectionString;
SqlConnection conn = new SqlConnection(connstr);
conn.Open();
string sqlstr = "select * from listdescription";
SqlCommand cmd = new SqlCommand(sqlstr, conn);
SqlDataReader sdr = cmd.ExecuteReader();
context.Response.Write(GetJSON(conn,sdr, "T_Ware"));
}
protected string GetJSON(SqlConnection conn,SqlDataReader drValue, string strTableName)
{
List<tablename> tbdescs = new List<tablename>();
tablename tbdesc1 = new tablename();
tablename tbdesc2 = new tablename();
tablename tbdesc3 = new tablename();
int tbdesccount1 = 0;
int tbdesccount2 = 0;
int tbdesccount3 = 0;
try
{
while (drValue.Read())
{
#region
if (drValue["tbname"].ToString().Trim() == "vw_ccx")
{
if (tbdesccount1 == 0)
{
tbdesccount1++;
tbdesc1.tbdesc = "员工信息表";
tbdesc1.tbname = drValue["tbname"].ToString().Trim();
}
}
if (drValue["tbname"].ToString().Trim() == "itemTurnoverMsg")
{
if (tbdesccount2 == 0)
{
tbdesccount2++;
tbdesc2.tbdesc = "员工物品进出表";
tbdesc2.tbname = drValue["tbname"].ToString().Trim();
}
}
if (drValue["tbname"].ToString().Trim() == "message_2D")
{
if (tbdesccount3 == 0)
{
tbdesccount3++;
tbdesc3.tbdesc = "员工物品登记表";
tbdesc3.tbname = drValue["tbname"].ToString().Trim();
}
}
#endregion
}
tbdescs.Add(tbdesc1);
tbdescs.Add(tbdesc2);
tbdescs.Add(tbdesc3);
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
finally
{
drValue.Close();
conn.Close();
}
JavaScriptSerializer jsSerializer = new JavaScriptSerializer();
StringBuilder sb = new StringBuilder("{");
sb.Append("root:");
sb.Append(jsSerializer.Serialize(tbdescs));
sb.Append("}");
return sb.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
Store2的数据:
{combo2root:[{"listname":"nothing","listdesc":"","tbname":"vw_ccx"},{"listname":"department","listdesc"
:"部门","tbname":"vw_ccx"},{"listname":"dorm_number","listdesc":"宿舍号","tbname":"vw_ccx"},{"listname":"emp_name"
,"listdesc":"员工姓名","tbname":"vw_ccx"},{"listname":"card_number","listdesc":"员工厂牌号","tbname":"vw_ccx"
},{"listname":"sex","listdesc":"性别","tbname":"vw_ccx"},{"listname":"in_date","listdesc":"入住时间","tbname"
:"vw_ccx"},{"listname":"area","listdesc":"宿舍区号","tbname":"vw_ccx"},{"listname":"nothing","listdesc":""
,"tbname":"message_2D"},{"listname":"dorm_number","listdesc":"宿舍号","tbname":"message_2D"},{"listname"
:"emp_name","listdesc":"员工姓名","tbname":"message_2D"},{"listname":"makeperson","listdesc":"制码人","tbname"
:"message_2D"},{"listname":"makedate","listdesc":"制码时间","tbname":"message_2D"},{"listname":"card_number"
,"listdesc":"员工厂牌号","tbname":"message_2D"},{"listname":"sex","listdesc":"性别","tbname":"message_2D"},
{"listname":"in_date","listdesc":"入住时间","tbname":"message_2D"},{"listname":"area","listdesc":"宿舍区号","tbname"
:"message_2D"},{"listname":"number2D","listdesc":"二维码编码","tbname":"message_2D"},{"listname":"nothing"
,"listdesc":"","tbname":"itemTurnoverMsg"},{"listname":"number2D","listdesc":"二维码编码","tbname":"itemTurnoverMsg"
},{"listname":"card_number","listdesc":"员工厂牌号","tbname":"itemTurnoverMsg"},{"listname":"emp_name","listdesc"
:"员工姓名","tbname":"itemTurnoverMsg"},{"listname":"dorm_number","listdesc":"宿舍号","tbname":"itemTurnoverMsg"
},{"listname":"item_in","listdesc":"物品进区时间","tbname":"itemTurnoverMsg"},{"listname":"item_out","listdesc"
:"物品出区时间","tbname":"itemTurnoverMsg"},{"listname":"register_emp","listdesc":"登记人员姓名","tbname":"itemTurnoverMsg"
},{"listname":"register_card","listdesc":"登记人员厂牌号","tbname":"itemTurnoverMsg"}]}
后台语句:
经验总结:要注意store是什么时候加载的,如果把store2放到combo1 去加载,那就过滤不了了(我自己试的时候是这样的)
还有为什么要用store3来存放combo2和combo3的数据那是在这为学者那得到的提示!点击打开链接
如果大家有什么更好的方法请指导下我哦,谢谢。