效果图:以摸板形式绑定数据
效果图:及联查询
效果图:绑定本地数据,默认选种第一个
源代码:
Ext.namespace("Ext.tet");
Ext.tet.ComboBox=new Ext.extend(Ext.form.ComboBox,{
DataSource:{tableName:null,cols:[],relationValue:null,query:null,search:null,where:null,orderBy:null,direction:null},
ajaxUrl:"/ExtProject/pagination/comBoxPagination.ashx",
typeAhead:true,
forceSelection: true,
triggerAction: 'all', //all 不起用 autocomplete功能, query 起用autocomplete功能
emptyText:'请选择信息',
selectOnFocus:true,
anchor:"97%",
blankText:'请选择一个',
readOnly:true,
minChars:1,
lazyRender:true,
selectFirstRow:false, //默认不选种第一项
lazyInit:true,
initComboBox:function(){
if(this.DataSource){
if(Ext.type(this.DataSource)=="object"){ //服务器
this.mode="remote";
if(this.pageSize){ //分页,回掉数据
triggerAction="query";
}
}
else if(Ext.type(this.DataSource)=="array"){ //本地数据
this.mode="local";
}
}
else Ext.Msg.alert("提示","DataSource为空");
},
createStore:function(){
if(this.DataSource){ //[valueField不能有重复值]
if(!this.displayField) this.displayField=this.valueField;
if(!this.valueField) this.valueField=this.displayField;
if(this.mode=="local"){
this.store=new Ext.da
fields:[this.displayField,this.valueField],
da
});
}
else{
this.store=new Ext.da
proxy:new Ext.da
{
url:this.ajaxUrl,
method:"POST"
}),
reader:new Ext.da
{
fields:this.DataSource["cols"],
root:"da
totalProperty:"totalCount"
}),
remoteSort:true,
sortInfo: {field:this.DataSource["orderBy"]||this.displayField,direction:this.DataSource["direction"]||"Desc"},
listeners:{
"beforeload":function(ds,option){
if(ds.baseParams["relationValue"]==null){ //级联查询
if(ds.baseParams["query"]!=null||ds.baseParams["query"]==""){
ds.baseParams["where"]=ds.baseParams["search"]+" like '%" + ds.baseParams["query"] + "%'";
ds.baseParams["query"]=null;
}
}
else{
ds.baseParams["where"]=ds.baseParams["search"]+" like '%" + ds.baseParams["relationValue"] + "%'";
}
}
},
baseParams:{start:0,limit:this.pageSize||1000,search:this.DataSource["search"]||this.displayField,relationValue:this.DataSource["relationValue"]||null,tableName:this.DataSource["tableName"],key:this.valueField,columns:this.DataSource["cols"].join(","),where:this.DataSource["where"]}
});
this.store.load();
}
}
},
render:function(comb){
Ext.tet.ComboBox.superclass.render.apply(this, arguments);
if(this.selectFirstRow){
this.setValue(this.getStore().getAt(0).da
this.fireEvent("select",this,this.getStore().getAt(0),0);
}
},
constructor:function(options){
Ext.apply(this,options);
this.initComboBox();
this.createStore();
Ext.tet.ComboBox.superclass.constructor.call(this);
}
});
Ext.reg('combobox',Ext.tet.ComboBox);
调用方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
<script type="text/javas
<script type="text/javas
<script type="text/javas
</head>
<script language=javas
Ext.BLANK_IMAGE_URL="../../Client/Images/s.gif";
window.on
new Ext.Panel({
title:"本地",
frame:true,
width:375,
height:140,
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:60,
defaults:{anchor:"95%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
renderTo:"panel1",
items:[
{
xtype:"combobox",
fieldLabel:"性别",
valueField:"value",
DataSource:[["男"],["女"]],
selectFirstRow:true
},
new Ext.tet.ComboBox({
fieldLabel:"性别",
valueField:"value",
DataSource:[["男"],["女"]]
}),
new Ext.tet.ComboBox({
id:"testcomb",
readOnly:false,
fieldLabel:"工资级别",
displayField:"text",
valueField:"value",
DataSource:[["工程师","10000"],["项目经理","6000"],["程序员","4000"]],
selectFirstRow:true,
listeners:{
"select":function(combo,rec,index)
{
alert(combo.getValue());
}
}
})
]
});
//Ext.getCmp("testcomb").setValue(Ext.getCmp("testcomb").getStore().getAt(0).da
//alert(Ext.getCmp("testcomb").getValue());
//alert(Ext.getCmp("testcomb").valueField);
new Ext.Panel({
title:"服务器",
frame:true,
width:375,
height:200,
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:60,
defaults:{anchor:"95%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
renderTo:"panel2",
items:[
new Ext.tet.ComboBox({
tpl: '<tpl for="."><div ext:qtip="{BorrowNo}" class="x-combo-list-item">姓名:{LoginName},编号:{BorrowNo}</div></tpl>',
readOnly:false,
fieldLabel:"图书编号",
displayField:"BorrowNo",
DataSource:{tableName:"Borrow_View",cols:["BorrowNo","LoginName"]},
listeners:{
"select":function(combo,rec,index)
{
alert(combo.getValue());
}
}
}),
new Ext.tet.ComboBox({
tpl: '<tpl for="."><div ext:qtip="{Name}" class="x-combo-list-item">姓名:{Name},登陆名:{LoginName}<br/>身份证:{IdentityCard}</div></tpl>',
readOnly:false,
fieldLabel:"用户姓名",
displayField:"Name",
valueField:"LoginName",
pageSize:10,
resizable:true,
DataSource:{tableName:"Users",cols:["Name","LoginName"]},
listeners:{
"select":function(combo,rec,index)
{
alert(combo.getValue());
}
}
})
]
});
new Ext.Panel({
title:"及联查询",
frame:true,
width:375,
height:200,
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:70,
defaults:{anchor:"95%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
renderTo:"panel3",
items:[
{
xtype:"combobox",
fieldLabel:"身份证(1)",
valueField:"value",
DataSource:[["0238"],["0236"],["0237"]],
selectFirstRow:true,
listeners:{
"select":function(combo,rec,index)
{
Ext.getCmp("user").reset();
Ext.getCmp("user").lastQuery=combo.getValue(); //清除上一次查询
Ext.getCmp("user").getStore().baseParams["search"]="IdentityCard"; //查询字段
Ext.getCmp("user").getStore().baseParams["relationValue"]=combo.getValue();//查询值
}
}
},
new Ext.tet.ComboBox({
id:"user",
tpl: '<tpl for="."><div ext:qtip="{Name}" class="x-combo-list-item">姓名:{Name},登陆名:{LoginName}<br/>身份证:{IdentityCard}</div></tpl>',
readOnly:true,
fieldLabel:"用户姓名(2)",
displayField:"Name",
valueField:"LoginName",
pageSize:10,
resizable:true,
DataSource:{tableName:"Users",cols:["Name","LoginName","IdentityCard"]},
listeners:{
"select":function(combo,rec,index)
{
alert(combo.getValue());
}
}
})
]
});
}
</script>
<body>
<div>
<div id="panel1"></div>
<div id="panel2"></div>
<div id="panel3"></div>
</div>
</body>
</html>
comBoxPagination.ashx 代码:
<%@ WebHandler Language="C#" Class="comBoxPagination" %>
using System;
using System.Web;
using System.Da
using System.Da
public class comBoxPagination : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string tableName = context.Request.Form["tableName"];
string key = context.Request.Form["key"];
string starts = context.Request.Form["start"];
string limits = context.Request.Form["limit"];
string sort = context.Request.Form["sort"];
string dir = context.Request.Form["dir"];
string where = context.Request.Form["where"];
string columns = context.Request.Form["columns"];
string JSON = "";
if (starts != null && limits != null)
{
int start = int.Parse(starts);
int limit = int.Parse(limits);
if (where != null)
if (where == "null" || where.Trim() == "") where = null;
JSON = GetPaginationJson(tableName, key, start, limit, sort, dir, where, columns);
}
else
{
context.Response.Write("{success:'false'}");
}
context.Response.Write(JSON);
}
public bool IsReusable
{
get
{
return false;
}
}
public string GetPaginationJson(string tableName, string key, int start, int limit, string sort, string dir, string where, string columns)
{
JSONHelper json = new JSONHelper();
json.success = true;
DataSet ds = GetInfo(tableName, key, start, limit, sort, dir, where, columns);
string[] fields = columns.Split(',');
foreach (DataRow dr in ds.Tables[0].Rows)
{
foreach (string col in fields)
{
json.AddItem(col, dr[col].ToString());
}
json.ItemOk();
}
json.totlalCount = GetInfoCount(tableName, where);
return json.ToString();
}
/// <summary>
/// 得到总记录数
/// </summary>
/// <returns></returns>
public int GetInfoCount(string tableName, string where)
{
string sql = "";
if (where == null)
sql = "select count(*) from " + tableName;
else
sql = "select count(*) from " + tableName + " where " + where;
return int.Parse(CHY.DbHelperSQL.ExecuteScalar(sql).ToString());
}
public DataSet GetInfo(string tableName, string key, int start, int limit, string sort, string dir, string where, string columns)
{
string sql;
if (sort == null)
sort = key;
if (dir == null)
dir = "DESC";
if (columns == null)
columns = "*";
if (where == null)
sql = "select distinct top " + limit + " " + columns + " from " + tableName + " where " + key + " not in(select top " + start + " " + key + " from " + tableName + " order by " + sort + " " + dir + ") order by " + sort + " " + dir;
else
sql = "select distinct top " + limit + " " + columns + " from " + tableName + " where " + where + " and " + key + " not in(select top " + start + " " + key + " from " + tableName + " where " + where + " order by " + sort + " " + dir + ") order by " + sort + " " + dir;
return CHY.DbHelperSQL.Query(sql);
}
}