源代码下载
本篇介绍了将数据动态绑定到Ext.form.ComboBox,采取后台读数据库的方式.支持手写和联想功能,还提供显示提示消息的效果和改变ComboBox的宽度和高度.
效果图如下:
前台default.aspx源代码:
default.aspx源代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-purple.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.panel_icon { background-image:url(images/first.gif)}
.center_icon { background-image:url(images/center.png)}
</style>
</head>
<body>
<form id="form1" runat="server">
<div><div id="hello"></div>
<script type="text/javascript">
//动态绑定数据
function ready()
{
Ext.QuickTips.init();
var store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=1"}), // 数据源
reader: new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:[{name: 'ID'},{name: 'TypeCName'}]})// 如何解析
});
store.load();
var comboBox = new Ext.form.ComboBox
({
tpl: '<tpl for="."><div ext:qtip="提示：ID={ID}；TypeCName={TypeCName}" class="x-combo-list-item">{TypeCName}</div></tpl>',
id:"ComboBox_ID",
editable:true,//默认为true，false为禁止手写和联想功能
store:store,
emptyText:'请选择',
mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
typeAhead: true,
triggerAction: 'all',
valueField:'ID',
displayField:'TypeCName',
selectOnFocus:true,
renderTo:'hello',
width:160,
resizable:true
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
前台comboJson.aspx源代码: 这个页面尤其要注意的 就一行 务必记住了
前台comboJson.aspx源代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="comboJson.aspx.cs" Inherits="comboJson" %>
后台comboJson.aspx.cs代码显示如下:
后台comboJson.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
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;
public partial class comboJson : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string flag = Request.QueryString["Flag"];
switch (flag)
{
case "1":
loadCombo();
break;
default:
break;
}
}
void loadCombo()
{
DataSet ds = ExtBusiness.GetMoreRowByTableName("TypeTable");
string json = "";
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
json = ExtUtil.GetJsonString(ds);
int count = ds.Tables[0].Rows.Count;
json = "{totalPorperty:" + count + ",result:" + json + "}";
}
else
{
json = "错误";
}
Response.Write(json);
}
}
源代码下载
posted @ 2008-11-03 09:53
殷良胜 阅读(1908)
评论(28) 编辑 收藏 网摘
发表评论
#1楼[
楼主]2008-11-03 12:37 |
#3楼[
楼主]2008-11-22 12:58 |
@angeletfang
呵呵
有空多深入研究下
最近又忙了
没有时间呀
楼主，CommonUtil.GetJsonString(ds)是个将Dataset转化成json的自定义类吧？我是新手，博主可否将该类的代码发我一份啊。不胜感激...
#5楼[
楼主]2008-11-25 18:31 |
@guijinsheng
其实
你只要从提高篇第一篇往下看的话
你就不需要了
但既然你说了
我还是要给你的
如果全给你 我觉得你会懒惰了
做程序员手不能够懒 脑子更不能够懒
/// <summary>
/// 获取JsonString
/// </summary>
/// <param name="ds">DataSet</param>
/// <returns></returns>
public static string GetJsonString(DataSet ds)
{
string res = ""; ;
IList<Hashtable> mList = new List<Hashtable>();
try
{
foreach (DataRow row in ds.Tables[0].Rows)
{
Hashtable ht = new Hashtable();
foreach (DataColumn col in ds.Tables[0].Columns)
{
ht.Add(col.ColumnName, row[col.ColumnName]);
}
mList.Add(ht);
}
res = JavaScriptConvert.SerializeObject(mList);
}
catch (Exception ee)
{
}
return res;
}
JavaScriptConvert.SerializeObject这是一个组件的方法，不是我写的，你只要在项目和Cs文件里面添加引用就可以了。前面都有说明的。
又来叨扰了，请问博主，为什么返回的json字符串都有数据，可combobox里缺出不来数据呢,？代码是参考博主的，是不是我又疏忽了什么地方呢？感激涕零...
#8楼[
楼主]2008-11-26 13:03 |
@guijinsheng
把你的代码贴上来看看 可以吗
如果没有时间贴代码
你可以先检查下数据库的字段和前台的几个字段是否对应了
另外，在对应的comboJson.aspx的html页面部分只保留最上面一行，其他的务必删除掉
多谢博主！！！
js:
function ready()
{
Ext.QuickTips.init();
var store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=1"}), // 数据源
reader: new Ext.data.JsonReader({ totalProperty: "totalPorperty", root: "result", fields: [{ name: 'CategoryID' }, { name: 'CategoryName'}] })// 如何解析
});
store.load();
var comboBox = new Ext.form.ComboBox
({
tpl: '<tpl for="."><div ext:qtip="提示：ID={CategoryID}；Name={CategoryName}" class="x-combo-list-item">{CategoryName}</div></tpl>',
id:"ComboBox_ID",
editable:true,//默认为true，false为禁止手写和联想功能
store:store,
emptyText:'请选择',
mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
typeAhead: true,
triggerAction: 'all',
valueField: 'CategoryID',
displayField: 'CategoryName',
selectOnFocus:true,
renderTo:'hello',
width:160,
resizable:true
});
}
Ext.onReady(ready);
comboJson.aspx返回的json字符串如下
{totalPorperty:15,result:[{"CategoryName":"音响家电","CategoryID":1},{"CategoryName":"数码设备","CategoryID":2},{"CategoryName":"运动户外","CategoryID":3},{"CategoryName":"男女服饰","CategoryID":4},{"CategoryName":"日用家居","CategoryID":5},{"CategoryName":"通讯器材","CategoryID":6},{"CategoryName":"工艺品/首饰","CategoryID":7},{"CategoryName":"图书","CategoryID":8},{"CategoryName":"健康美容","CategoryID":9},{"CategoryName":"自行车","CategoryID":10},{"CategoryName":"办公用品","CategoryID":11},{"CategoryName":"电脑/电脑配件","CategoryID":13},{"CategoryName":"票务","CategoryID":14},{"CategoryName":"房屋租赁","CategoryID":15},{"CategoryName":"饮食","CategoryID":19}]}
补充：博主，我上午测试的时候，发现页面都很正常，就是出不来数据。grid显示列表里也出不来数据，很奇怪...。博主可否方便把MSN告诉小弟，以后小弟不懂的地方再向博主请教...
#10楼[
楼主]2008-11-26 14:07 |
@guijinsheng
你好
我的Msn：yinliangsheng8mchina@hotmail.com
我已经上传源代码
#11楼[
楼主]2008-11-26 14:09 |
@guijinsheng
说明下
我公司有规定
上班不能够上msn
所以
如果
你加了我
而我不能够很快的接受
希望你能够谅解
终于解决了！谢谢博主。博主该系列的文章太精辟了，我要继续看下去，继续学下去，这么多的好东东，我就先收藏啦！这两天叨扰博主了，给你带来的诸多不便，还请博主谅解。
#14楼[
楼主]2008-11-26 15:30 |
@guijinsheng
“博主该系列的文章太精辟了”
吹破天了
------------------------
呵呵
好东西大家分享！
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'topics', //'Posts'
fields: ['threadid'], //'TableName'
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'//'JsonData.aspx?param=initValidateDB&dbServerID=(local)&dbUIDID=sa&dbPasswordID=ABCDEF&dbNameID=Northwind'//'StaticJSON.aspx'
})
});
store.load();
var combo = new Ext.form.ComboBox({
store: store,
displayField:'threadid',//'TableName'
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a table...',
selectOnFocus:true,
applyTo: 'local-states'
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 650px; padding-left: 30px">
<input type="text" id="local-states" size="30" />
</div>
</form>
</body>
</html>
上面的代码是可以用，没有问题的，
但我将JsonStore的url改成那行代码后面注释的2个url其中一个时，就会出现javascript错误：
Line:1
Error: Excepted ';'
那2个url的aspx页面已经给我删剩codebehind那行代码了，错误还是继续，
甚至那个StaticJSON.aspx那个url里面就是直接Response.Write()在'http://extjs.com/forum/topics-browse-remote.php'里面取得的数据，一样还是那个错误，最终数据是出不来的.........
总之用别人php的数据没问题，用自己aspx的数据没反应，难道php和aspx输出方式会不一样？请问博主遇到过类似问题没有？
我用的是vs2005+IE6.0+ext2.2
顺便贴一下StaticJSON.aspx里面Page_Load方法里面的2行代码，可能比较占位置，不好意思~~
//this.Response.Write(@"{\"Posts\":[{\"TableName\":\"Orders\"},{\"TableName\":\"Products\"},{\"TableName\":\"Order Details\"},{\"TableName\":\"CustomerCustomerDemo\"},{\"TableName\":\"CustomerDemographics\"},{\"TableName\":\"Region\"},{\"TableName\":\"Territories\"},{\"TableName\":\"EmployeeTerritories\"},{\"TableName\":\"Employees\"},{\"TableName\":\"Categories\"},{\"TableName\":\"Customers\"},{\"TableName\":\"Shippers\"},{\"TableName\":\"Suppliers\"}]}");
#18楼[
楼主]2008-12-04 10:18 |
@Gil
将我写的先测试下吧 把我的例子真正搞懂 你就明白了问题在哪了
我这个就是从你的第一篇引申出来的，用你第一篇的代码，那个显示表名的combobox闪一下loading就出不来数据，又不出错，调试后台输出数据正常，调试javascript发现监视不了那些ext的类的数据的，然后没办法了，为了那个combobox能显示数据表的名字，我可是东拼西凑地去试验......
你的代码好像在vs2005有点失灵，我现在没办法装2008，
我觉得我上面说那个javascript问题应该把代码删剩下最上面一行就能解决，但是事实上不行，那个页面就只得那个数据了，只要一去获取它就出现javascript错误，莫名其妙的，，，，，你没遇到过就算啦，没关系的，我也就是问问，看看你有没有头绪，没有我就自己再找原因去啦~~！
#20楼[
楼主]2008-12-04 15:00 |
@Gil
你说的是对的
我没有在2005里面测试过
你能够编译通过吗
或者
你能够将你的文件压缩后发到我的邮箱里面吗？
（但不要把Ext的基类文件发来，毕竟它们是很大的）
我帮你测试下
因为 我们都比较忙
根据经验猜测是没有多大意义的。
嘻嘻，正想发给你，发现之前那个页面给我改得乱糟糟的了
然后重新搞了一个，居然运行成功了，
想了想，原来以前看你第一篇提高篇文件的时候不知道要把JsonData那个页面多余的标签删掉，搞来搞去都不行，就自己写combo的独立页面，摸索到了这里，知道要删JsonData页面的标签了，但是就没有试一下以前的~~
估计那些第一篇combo box闪一下loading不出数据的情况，都是没有删除JsonData页面标签的，博主应该在第一篇就要提醒一下，不然要摸到这里的第二十七篇才知道了^_^!
至于我自己那个错误，把proxy: new Ext.data.ScriptTagProxy...形式的数据源直接换成url:...形式的数据源就没事了，不知道这两个数据源之间有什么区别，proxy那个从自带的example上抄下来的，但查文档JsonStore里面没有proxy这个属性，晕晕啦@_@!
多谢博主的关心和帮助！
大家都忙，我上来这里都是要偷偷摸摸的，工作的时候多开一个项目，没事就捣鼓一下，嘻嘻~~
#22楼[
楼主]2008-12-04 17:37 |
@Gil
谢谢你的提醒 你说的很有道理
我会将第一篇重写的，再提供源码下载
而且 我也觉得第一篇相对其它篇较难了
楼主老大，我按照你的代码，和下面一些兄弟的提示，写了段程序，但是combo里没内容啊，帮看看哪里错了
代码：
数据源var gw_add_store=new Ext.data.JsonStore({
url:"_gw_add_json.php",root:"results",totalProperty:'total',fields:["grp_id"]});
gw_add_store.load();
初始化var combo = new Ext.form.ComboBox({name:"grp_id",fieldLabel: 'GrpId',store:gw_add_store,forceSelection: true,emptyText:'Select a table...',typeAhead:true,displayField:'grp_id',triggerAction:'all',mode:'local'});
后台：
<?php
require("conn.php");
$req=@pg_query($db,"select grp_id from gw_grp order by grp_id");
while($return=@pg_fetch_array($req)){
$a=$return[0];
echo "grp_id: $a";
}
?>
后面显示的地方写了combo，但是只有个框，里面没有内容，在此先谢过
#26楼[
楼主]2009-03-22 10:08 |
--引用--------------------------------------------------
bjinner: 资源不能下，能修改一下下载文件的名字吗？
--------------------------------------------------------
最近没有仔细在左栏里看见你的留言，导致无法给你及时回复，很抱歉
我尝试了下
是可以下载的
你再尝试下，可以吗
#27楼[
楼主]2009-03-22 10:09 |
--引用--------------------------------------------------
织梦者: 楼主老大，我按照你的代码，和下面一些兄弟的提示，写了段程序，但是combo里没内容啊，帮看看哪里错了
代码：
数据源var gw_add_store=new Ext.data.JsonStore({
url:"_gw_add_json.php",root:"results",totalProperty:'total',fields:["grp_id"]});
gw_add_store.load();
初始化var combo = new Ext.form.ComboBox({name:"grp_id",fieldLabel: 'GrpId',store:gw_add_store,forceSelection: true,emptyText:'Select a table...',typeAhead:true,displayField:'grp_id',triggerAction:'all',mode:'local'});
后台：
<?php
require("conn.php");
$req=@pg_query($db,"select grp_id from gw_grp order by grp_id");
while($return=@pg_fetch_array($req)){
$a=$return[0];
echo "grp_id: $a";
}
?>
后面显示的地方写了combo，但是只有个框，里面没有内容，在此先谢过
--------------------------------------------------------
最近没有仔细在左栏里看见你的留言，导致无法给你及时回复，很抱歉
php代码 我实在是看不懂。
#28楼[
楼主]
2009-03-22 10:10 |
--引用--------------------------------------------------
xfu0311wxj@163.com: 这个源代码下载不了，老大看看原因啊
--------------------------------------------------------
你好，感谢关注
我尝试了下
是可以下载的
你再尝试下，可以吗