韦小宝是我的老乡

——慎思、专注,成就卓越管理
posts - 5, comments - 267, trackbacks - 1, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理
    最近园子里有很多朋友关心ExtJS,我最近写了一个项目管理工具用到ExtJS,我结合.NET写了个关于Grid实现的一个实例供需要的朋友参考。
    本实例开发环境是:Windows XP + Sql Server 2005 + IIS6+VS 2008 Beta2(.NET Framework3.5)
    实现步骤:
    1.取数据源
      这里是从数据库里读取数据生产JSON的方式供ExtJS Grid调用.
      (1)用Scott Guthrie提供的生产JSON格式的类,这篇文章可以访问:http://weblogs.asp.net/scottgu/archive/2007/10/01/tip
,它的译文请访问:http://blog.joycode.com/scottgu/archive/2007/10/10/109268.aspx
      建一个类文件JSONHelper.cs,代码如下:
JSONHelper.cs
      (2)利用LINQ读取数据记录,关于LINQ方面的文章参考Scott GuthrieLINQ to SQL系列文章
         为了方便ExtJS AJAX方式的调用,这里建一个ASPX页面,起名为:ProjectBaseInfo.aspx,代码如下:
ProjectBaseInfo.aspx.cs

ProjectBaseInfo.aspx中的代码为:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectBaseInfo.aspx.cs" Inherits="Web.Projects.JsonDataSource.ProjectBaseInfo" %>
<%=strJsonSource %>
    至此,已完成了取数据源。
   2.页面客户端
     (1)下载ExtJS库,请访问:http://extjs.com/
     (2)在你的WEB工程中建一个ExtJS目录。把下载的包里的目录都COPY进来(为了简便起见)。
     (3)建一个ProjectLists.html页面,代码如下:
ProjectLists.html

(注:请注意JS引用的路径)
   (1)新建GridForProjectLists.js文件(这个才是核心
代码如下:
GridForProjectLists.js

展示成果:

    至此,本文已实现Grid的数据显示、分页、排序的功能。常见的CRUD四个功能的R已完成,接下来,我将提供CUD的功能(如form提交等动作),未完待续……

Feedback

评论共2页: 上一页 1 2 

#7楼  回复 引用   

2007-11-22 12:13 by gggg[未注册用户]
强烈期待你的打包下载。。

#8楼  回复 引用 查看   

2007-11-22 12:46 by Clark Zheng      
不错不错,期待

#9楼  回复 引用   

2007-11-22 13:08 by 在线代理[未注册用户]
很好很强大。哈哈到时候来下载实例。

#10楼  回复 引用 查看   

2007-11-22 13:31 by Axel      
也在使用ExtJS.
配合ms的ajax。对json和webservice对数据的转换和传递效率会更好!

#11楼  回复 引用   

2007-11-22 16:42 by tale[未注册用户]
ExtJs真的不错,就是体积太大了点.呵呵

#12楼  回复 引用 查看   

2007-11-22 18:32 by 阿一      
项目引入ExtJs
不会涉及版权问题吗?

#13楼  回复 引用 查看   

2007-11-22 19:48 by 無尽海      
呵呵收藏
继续阅读后续

#14楼[楼主]  回复 引用 查看   

2007-11-22 22:38 by CmSoft      
@阿一
请看:http://extjs.com/license

#15楼  回复 引用   

2007-11-23 11:30 by Eeyore[未注册用户]
大哥,你什么时候提供打包下载啊?~~我用Orcas调试不出来:(

#16楼  回复 引用   

2007-11-23 13:27 by riancy[未注册用户]
请提供代码下载,

#17楼  回复 引用 查看   

2007-11-23 15:38 by 小庄      
界面好漂漂啊!要是有源码就好了!

#18楼  回复 引用 查看   

2007-11-24 12:23 by 扬哥      
不错!什么时候能提供源码呢?

#19楼  回复 引用 查看   

2007-11-25 11:54 by 戏水      
再问: 效率如何 ? 版权问题?

#20楼  回复 引用   

2007-11-26 19:24 by ylg[未注册用户]
好像放Grid的网页加上如下两句时,Grid的标题就不显示了.(在IE6下)
<!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" >

#21楼  回复 引用   

2007-11-26 21:29 by ylg[未注册用户]
好像放Grid的网页加上如下两句时,Grid的标题就不显示了.(在IE6下,ext2.0)
<!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" >

#22楼  回复 引用   

2007-11-29 14:17 by fjyou[未注册用户]
提供的源代码数据库有sql server2000的吗

#23楼[楼主]  回复 引用 查看   

2007-11-29 16:22 by CmSoft      
@ylg
还不知道你的问题,有空我试试
@fjyou
sorry,到时候我只提供sql server2005的:(

#24楼  回复 引用   

2007-12-02 17:14 by LGame[未注册用户]
我按你的改了一个,可就是显示不出来数据
是VS2005的

能帮我看一下吗??

#25楼  回复 引用 查看   

2007-12-04 11:54 by seeker      
添加过程中,那个进度条是怎么做的.能否把源码发给我下:ghotvub03@sina.com.要急用,THANK YOU!

#26楼  回复 引用   

2007-12-05 11:50 by HI[未注册用户]
后台得到的strJsonSource怎么在GridForProjectLists.JS里没有用到呢?GridForProjectLists.JS里是怎么拿到后台数据的

#27楼[楼主]  回复 引用 查看   

2007-12-05 17:25 by CmSoft      
@HI
在GridForProjectLists.JS中有
proxy: new Ext.data.HttpProxy({
url: '../Projects/JsonDataSource/ProjectBaseInfo.aspx'
}),
@seeker
我会blog中发布源码
@LGame
可以在blog中留言给我

#28楼  回复 引用 查看   

2007-12-06 09:22 by Flymouse      
日期型的数据,JSON序列化后是Date(1192821211) 这样的数据,我使用date的映射类型,表哥显示不出来数据来

#29楼[楼主]  回复 引用 查看   

2007-12-06 09:36 by CmSoft      
@Flymouse
不知你有没有注意的我的Lambda表达式的处理:)

#30楼  回复 引用   

2007-12-06 10:44 by kemy[未注册用户]
不知道,你有没有实现右键菜单,然后删除的功能?

以下是我写的测试代码:老是有错..能指点一下吗?

我就是想点击表格的某一行右键,出现删除的菜单,然后点删除出现一个确认删除的提示框,如果'yes',则执行del相应的代码

grid.addListener('rowcontextmenu', onMessageContextMenu);

//callback function for the right click event
function onMessageContextMenu(grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
var selectedId = ds.getAt(rowIndex).id;
var messageContextMenu = new Ext.menu.Menu({
id: 'messageContextMenu',
items: [
{
text: '删除',
_id: selectedId,
handler: cdelete
}
]
});
messageContextMenu.showAt([coords[0], coords[1]]);
e.preventDefault();
};
function cdelete(item){
rightclickdelete(item._id);
};
var rightclickdelete =function (_delid){
if(_delid)
{
Ext.MessageBox.confirm('Message','Do you really want to delete selection?', _delete); //这里_delete的参数怎么写?
}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}//end if/else block
};
function _delete(btn){
if(btn=="yes"){
var jsondata=Array(_delid); //这里得不到rightclickdelete 传入的_delid
var encoded_keys = Ext.encode(jsondata);
Ext.Ajax.request({
waitMsg: 'Saving changes...',
//url where to send request
url: 'readdata.php',
.......

我这样也试过:
if(_delid)
{
Ext.MessageBox.confirm('Message','Do you really want to delete selection?', _delete(_delid));
}

funtcion _delete(btn,_delid){
if(btn=="yes"){
但是这样btn会没有值,也就无法执行后面的代码

#31楼[楼主]  回复 引用 查看   

2007-12-06 14:07 by CmSoft      
@kemy
首先请参考我的http://www.cnblogs.com/cmsoft/archive/2007/11/24/ExtJS_Grid_Delete.html这个文章
然后GridForProjectLists.JS中实现Grid的ContextMenu及Del功能如下:
//right click menu
gdProjects.addListener('rowcontextmenu', showContextMenu);
function showContextMenu(gdProjects, rowIndex, e) {
e.stopEvent();
var local = e.getXY();
var gridContextMenu = new Ext.menu.Menu({
items: [
{
text: '删除',
handler: function(){
var record = gdProjects.getStore().getAt(rowIndex);
Ext.MessageBox.show(
{
title:'提示',
msg:'确实需要删除所选的记录吗?',
buttons: Ext.MessageBox.YESNO,
icon: Ext.MessageBox.QUESTION,
fn: function(button){
if(button=='yes'){
var projectNo=record.data.PROJECT_NO;
var conn = new Ext.data.Connection();
conn.request({
url:"../Projects/OperProjects/DeleteProject.asmx/DelProject",
params:{strProjects:projectNo},
method: 'post',
scope: this,
callback:function(options,success, response){
if(success){
Ext.MessageBox.alert("提示","所选记录成功删除!");
ds.load({params:{start:0, limit:25}});
}
else
{Ext.MessageBox.alert("提示","所选记录删除失败!");}
}
})
}
}
});
}
}
]
});
gridContextMenu.showAt([local[0], local[1]]);
e.preventDefault();
};

#32楼  回复 引用   

2007-12-06 15:36 by kemy[未注册用户]
谢谢!..问题现在已经解决!

我现在还有一个问题就是:

如果记录有2条,我全选,然后删除的话,grid还是显示2条记录.实际数据库里是删掉了的..每次非得刷新才显示正确!..

如果删除记录后,数据库还有1条(或者1条以上的记录的话),则显示正常的..

换句话说就是:如果删除数据后,grid数据为空时,显示有些问题..需要刷新一次才显示为空.(或者是添加一条记录后,显示有一条记录)

dc.reload()也无效

#33楼[楼主]  回复 引用 查看   

2007-12-06 16:00 by CmSoft      
@kemy

把实现删除重载的
ds.load({params:{start:0, limit:25}});
这行代码改成下面的:
ds.baseParams.start = 0;
ds.baseParams.limit = 25;
ds.reload();

#34楼  回复 引用   

2007-12-06 16:35 by kemy[未注册用户]
我试过了,还是没用啊..

真不知道是什么原因了..

#35楼[楼主]  回复 引用 查看   

2007-12-06 16:36 by CmSoft      
@kemy
我这里可以呀~~

#36楼  回复 引用   

2007-12-06 16:41 by kemy[未注册用户]
这是执行之后返回的respone: ({"totalCount":"0","list":null})

#37楼  回复 引用   

2007-12-06 16:45 by kemy[未注册用户]
楼主用联系方式吗?

我的msn: yuanqiming#sanysoft.com

把#改成@

#38楼[楼主]  回复 引用 查看   

2007-12-06 16:45 by CmSoft      
@kemy
处理一下返回的JSON
如:{"totalCount":"0","list":""}

#39楼  回复 引用   

2007-12-06 16:52 by kemy[未注册用户]
问题已经解决:

正如你所说:

把返回的json处理一下.

其它的还是照用:ds.reload(); 现在没问题了..

太感谢你了...

#40楼  回复 引用   

2007-12-13 15:08 by 学习型[未注册用户]
一看界面就知道是中信的...Wotalk,估计只能卖给政府,否则我们有太多更好的选择了....

#41楼  回复 引用   

2007-12-17 10:51 by nicccccc[未注册用户]
想问一下性能如何?

#42楼  回复 引用   

2007-12-25 11:16 by 路过[未注册用户]
LINQ的实体,如果使用了关联,不能序列化,请问要怎么解决
我实在不想用匿名类,也不想自己再写一个实体用于序列化。
谢谢

#43楼  回复 引用   

2008-01-05 22:16 by alexccccc[未注册用户]
cm.setHidden(4, !cm.isHidden(4));

为什么这个隐藏方法,在ie6不生效在firefox中才生效呢

#44楼  回复 引用 查看   

2008-01-12 16:35 by 破碎虚空      
支持,3Q。

#45楼  回复 引用   

2008-03-06 10:59 by 大雪无痕[未注册用户]
楼主,代码发完了吗?有下载地址吗?如果方便的话,发到我邮箱一份,感激涕零!!!!!

#46楼  回复 引用   

2008-03-15 09:37 by flybutter[未注册用户]
能发一份原码给我吗,以前我是用php+extjs,现在不知道怎么办asp.net和extjs结合起来

#47楼  回复 引用   

2008-04-30 11:36 by ghosteye[未注册用户]
看看

#48楼  回复 引用 查看   

2008-05-05 16:07 by 游子      
不错的东西,向你学习中

#49楼  回复 引用   

2008-06-05 11:33 by dsf[未注册用户]


不懂这个是什么东东

#50楼  回复 引用   

2008-06-05 11:34 by dsf[未注册用户]


自己去解决吧··
走喽··

#51楼  回复 引用   

2008-06-24 11:06 by 稻草人A[未注册用户]
能给我发份一份源码嘛 跪求! 谢谢!

#52楼  回复 引用   

2008-07-17 14:42 by sunhao[未注册用户]
求楼主给份完整源码
sunhao@mail.luhzou.net
先谢谢了

#53楼  回复 引用 查看   

2008-07-23 23:29 by 编程的夜猫      
好,MARK个,偶也正在研究这东东。学习来了!!

#54楼  回复 引用   

2008-07-28 20:57 by trsttr[未注册用户]
期待下载。。。

#55楼  回复 引用   

2008-08-14 14:29 by sunzhenlin[未注册用户]
跪求楼主给个源代码
sunzhenlin163@163.com

#56楼  回复 引用   

2008-08-24 15:36 by madfox[未注册用户]
不知道楼主有没有grid点击某行弹出窗口的例子啊

#57楼  回复 引用   

2008-09-18 01:12 by ExtJS 是垃圾[未注册用户]
ExtJS 是垃圾来的

#58楼  回复 引用   

2008-10-13 22:30 by EXTJS[未注册用户]
你这写的什么啊,不可能运行起来的。
把你改过的从新添加上来吧。
这真是笑话了,你的LINQ语法就有错误啊。
比如这几行:
137 int iCount = query.Count(); //所要记录数
138 int PageNum = start / limit; //共有页数
139 int PageSize = limit;
140 query = query.Skip(PageSize * PageNum).Take(PageSize); //当前页记录

象你这样写怎么可能得到正确的记录呢?应该这样吧:

140 query = query.Skip(start).Take(limit);

你写的太搞笑了。

#59楼[楼主]  回复 引用 查看   

2008-10-16 23:08 by CmSoft      
@EXTJS
看看上面的代码,
你的
query = query.Skip(start).Take(limit);

难道跟

137 int iCount = query.Count(); //所有记录数
138 int PageNum = start / limit; //共有页数
139 int PageSize = limit;
140 query = query.Skip(PageSize * PageNum).Take(PageSize); //当前页记录

不一样吗?


#60楼  回复 引用   

2008-11-06 16:31 by 寒水映月[未注册用户]
求楼主给份完整源码
谢谢了
我的邮箱ithanshui@163.com

#61楼  回复 引用   

2008-11-10 14:19 by 黄伟[未注册用户]
能否也给我一份源码
我的邮箱23017904@qq.com

#62楼  回复 引用 查看   

2008-11-15 21:24 by collum      
为嘛不给个下载的代码呢??呵呵,发布的这些代码COPY了有行号的,摆明了不让复制的!

#63楼  回复 引用   

2008-11-24 13:48 by 谢谢我[未注册用户]
哎。楼主还隐藏部分代码?为什么不都贡献出来??

#64楼  回复 引用   

2008-12-12 12:20 by study630[未注册用户]
不错

#65楼  回复 引用   

2009-02-02 15:44 by 苦中作乐2[未注册用户]
什么时候调用js文件?

body之间什么都没有,数据可以显示??

#66楼  回复 引用 查看   

2009-02-18 14:56 by 斌临城下      
最近再看关于ext的东西 很喜欢ext 请楼主给我发一份 谢谢

#67楼  回复 引用   

2009-02-22 11:52 by JLKEngine001[未注册用户]
兄弟,看到你做的东西还可以,不知能否把例子源码提供下载,供广大感兴趣的朋友一起研究,学习,讨论与交流!
QQ:26326507, email:hy2001al@163.com
网站:http://www.linjon.cn

#68楼  回复 引用   

2009-03-06 09:27 by fdsaf[未注册用户]
求楼主给份完整源码
fengma_312@126.com
先谢谢了

#69楼  回复 引用   

2009-03-30 11:56 by 覃[未注册用户]
看了Extjs的东西很感兴趣,希望楼主能发份代码给我谢谢!!
weare009@126.com

#70楼  回复 引用   

2009-04-05 12:38 by jacky345[未注册用户]
求楼主给份代码!songjinghui8886@126.com
不胜感激

#71楼  回复 引用   

2009-04-10 09:52 by dong936[未注册用户]
楼主拜托您,给份代码吧,
hsd6181000@163.com

#72楼  回复 引用   

2009-04-10 13:18 by lucius[未注册用户]
楼主,请问一下,怎么你这Grid里实现查询功能呢,

#73楼  回复 引用   

2009-04-10 13:20 by lucius[未注册用户]
楼主,请问一下,怎么你这Grid里实现查询功能呢,

#74楼  回复 引用 查看   

2009-05-14 08:52 by Yang Wang      
太强大了哈哈,正需要。果然和ExtJs提供的例子里一样在JS里用aspx页的形式获取JSon啊。多谢博主了。

#75楼  回复 引用   

2009-06-08 16:23 by Bom[未注册用户]
求楼主能给份完整代码,chencs_net@126.com,谢谢。

#76楼  回复 引用   

2009-06-29 16:40 by 190
lz能不能发一份源码给我研究一下。最近在做这个,很头痛的。
邮箱:pengy_b@htomail.com 谢谢

#77楼  回复 引用 查看   

2009-08-30 11:36 by sanshi      
基于Extjs的Asp.net控件库开源实现 http://extaspnet.codeplex.com/

#78楼  回复 引用   

2009-09-14 09:38 by sdxshx[未注册用户]
楼主拜托您,给份代码吧,
xushuxun@126.com

#79楼  回复 引用 查看   

2009-09-16 11:06 by 燕子120      
楼主 希望能发一份源代码,小妹感激不尽啊 yanzi120180407.com@qq.com

#80楼  回复 引用 查看   

2009-09-22 16:46 by 心随风飞      
楼主 ,能否发份源代码啊?
感激不尽!
gufeng4355853@163.com

#81楼  回复 引用 查看   

2009-09-25 10:21 by 随风V而逝      
楼主 希望能发一份源代码,感激不尽啊 nxf2000@126.com

#82楼  回复 引用   

2009-10-10 08:47 by daguangaa a a [未注册用户]
希望楼主能给我发一份,不胜感激啊 gzkqg119@163.com

#83楼  回复 引用   

2009-10-16 10:42 by 绳缆[未注册用户]
zjl_shenlan123@163.com
源码能发给我看看么?感激不尽!!!

#84楼  回复 引用 查看   

2009-10-18 16:46 by 技术拓荒者      
好文,大有帮助

#85楼  回复 引用 查看   

2009-11-10 11:25 by 色飞      
楼主貌似是上海中信的人~~

#86楼  回复 引用   

2009-11-28 14:09 by king123456[未注册用户]
很好。。。

#87楼  回复 引用   

2009-12-14 14:31 by 郭旭凤[未注册用户]
楼主,学习阶段,希望看看源码,谢谢.
guoxufeng@sina.com

#88楼  回复 引用   

2009-12-19 18:30 by 小虫1[未注册用户]
如何排除重复录入,就是说,数据库有原来有这条信息,新增数据时应该有提示,如何做到呢?

#89楼  回复 引用 查看   

2009-12-30 11:11 by 风雨者2      
楼主,请问这个有源代码吗?

#90楼  回复 引用 查看   

2010-01-06 11:01 by 漓石      
jib20000@163.com
请楼主发份源码,谢谢!
包括增、删、改、查的,可以吗?
我邮箱areallovejuan@126.com,谢谢楼主!

#93楼  回复 引用 查看   

2010-05-09 23:11 by 貔貅      
帮忙发下code,学习一下.也在关注ext与.net的结合应用
zw.world.go@163.com

#94楼  回复 引用 查看   

2010-06-07 09:48 by sunnygao30      
要用到ext的grid,正在学习,望楼主能发份源代码,十分感谢!邮箱:393519961@qq.com

#95楼  回复 引用 查看   

2010-09-29 17:10 by 123456603      
楼主可以把源码和数据库给俺发一份不?正需要
邮箱:9890cn@163.com

#96楼  回复 引用 查看   

2010-10-13 12:59 by 子曰过      
楼主能提供以下源代码嘛,我的邮箱是baoli_jin@126.com
O(∩_∩)O谢谢

#97楼  回复 引用 查看   

2010-10-22 09:29 by zoyo929      
ProjectBaseInfoDataContext 这个类在哪里?编译不过去?

#98楼  回复 引用 查看   

2010-10-22 17:07 by 我是小马      
楼主可否提供一下代码学习一下,谢谢!
kuixuan-ma@126.com

#99楼  回复 引用 查看   

2010-12-02 09:11 by 夜狼星      
楼主,能不能提供一下代码学学一下,谢谢!
asyaofeng@163.com

#100楼  回复 引用 查看   

2010-12-28 09:44 by 江大的人      
楼主,能不能提供一下代码学学一下,谢谢!
594848642@qq.com

#101楼  回复 引用 查看   

2011-01-15 10:29 by @涛@      
写的蛮好,很实用

#102楼  回复 引用 查看   

2011-01-24 10:32 by tanghao      
@学习型
我怎么就实现不了这个功能呢

#103楼  回复 引用 查看   

2011-01-24 10:32 by tanghao      
我怎么就实现不了这个功能呢

#104楼  回复 引用 查看   

2011-03-01 15:54 by goto2020      
Web应用高级开发工程师

职位类别:计算机软件/系统集成
工作地点:上海
工作经验:3-5年
职位月薪:8001-10000元/月

职位描述/要求:
岗位描述:
1. 进行ASP.NET (C#)开发;
2. 参与工程项目系统分析、系统设计;
3. 独立承担工程项目系统功能模块开发;
4. 开发过程中的系统测试。

岗位要求:
1. 熟悉.NET, Visual studio 2005开发工具,精通Asp.net/HTML/javascript/Ajax,能熟练进行.net(c#) 的程序开发;
2. 熟悉extjs框架,1年以上extjs实际项目开发经验,能够按照要求快速做出基于extjs的前台界面系统;
3. 具有1年以上大型项目开发与管理经验;
4. 精通 MS SQL Server 数据库与存储过程、函数开发;
5. 思路清晰,富有创新思维,较强的分析解决问题的能力,能独立完成开发任务;
6. 能承受较大的工作压力,富团队精神及较强的沟通能力。

有意者请投简历至:hr@flowportal.com

#105楼  回复 引用 查看   

2011-10-05 23:04 by 文盲份子      
悲催呀。我的东西弄N久了,就是不显示出来grid里面,悲催啊

#106楼  回复 引用 查看   

2011-11-07 22:48 by qqzzft      
楼主能不能发一下源代码啊,谢谢了。
qqzzft@163.com
评论共2页: 上一页 1 2