上篇文章《用ExtJs+Linq+Wcf打造简单grid 》,这个网格控件不带分页,本文在上文的基础上添加分页功能,文中会着重介绍如何在用LINQ返回分页数据,如何使ExtJs与WCF进行Restful...交互,如何在页面中添加一个带有分页功能的ExtJS的Grid控件。...第二步:创建网站之后,将ExtJs相关资源文件添加到项目中,这些文件主要来源是extjs的官方示例项目,完成后项目效果图为: ?...设计一个用于与ExtJs进行分页交互的PageData泛型类: using System; using System.Data; using System.Configuration; using...+Wcf+LINQ分页Grid实现完毕,下面浏览PageGridDemo.htm,查看运行效果: ?
一.WCF部分 1.通过查看官方的示例得知,分页数据源需要一个记录总数值,为保持通用性,这里借鉴jillZhang的文章,把他写的通用类PageData拿过来直接用 1 using System;
本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作,写一个通用的类...(改编自老张的PageData),用于WCF向ExtJs返回分页数据 Code using System; using System.Collections.Generic; using System.Runtime.Serialization...前端完整代码: Code ExtJs.XTemplate + WCF 打造无刷新数据分页 <!...,我们需要在成功返回服务端数据后,为每个分页链接以及按钮加上onClick事件,即这一部分 //开始处理分页按钮/链接事件 var oBtnGo = Ext.get
Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs...53, id: "North", items: [ { xtype:'component',cls:'logo',html:'ExtJs
由于不明白分页的总数是怎么计算,不知道他的分页方式所以花费了好多功夫,现在弄出来了与大家分享下 1.首先是EF的简历,想必大家都清楚:添加-〉新建项-〉数据-〉Ado。...net实体数据模型 2.就是后台数据也就是apiController,前台需要两个数据,一个是数据的总条数,第二个是要查询的分页数据 所以我们要建立一个实体,用于返回数据传送,由于多个页面都使用,多以用到了泛型...returnData.Data =data .ToArray(); return returnData; } 好了,后台数据准备完毕,那么就开始Extjs...部分的了 4.Extjs部分我就直接上代码了 Ext.require([ '*', 'Ext.toolbar.Paging', 'Scripts.*' ]) Ext.onReady(function...autoLoad: true, autoSync: true, model: 'InterfaceTrackModel', //设置分页大小
现在领导又要增加功能,需要分页的时候,每页显示N条信息。由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司..... // 文件名:pager.js // 文件描述:分页扩展类,extJS控件之每页显示N条记录 //-------------------------------------------------
/Extjs_Intellisense.js"> <script type="text/javascript" src="..
接着在分页工具栏添加3个按钮,其中添加用户、删除用户使用图标显示,而重置密码则直接使用文字按钮。...important; } 复制后,切换回用户视图脚本文件,在分页工具栏定义中加入items配置项来添加按钮,代码如下: items: [ '-',
onReady函数前面加入以下代码: Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs.../ux' } }); 代码中,enabled为true,表示开启动态加载,paths对象里面定义的就是加载路径,在这里定义了Ext扩展的加载路径为“scripts/extjs/ux”。
切换到PicManager.js文件,找到me.items的定义,在图片文件的配置项中添加tbar配置项,用来放置一个分页工具条,并在工具条上放一个SplitButton用来实现排序功能。...先在解决方案ExtJS\ux目录下创建一个DataView目录,然后在Ext JS包中examples\ux\DataView目录下,将DragSelector.js文件复制到该目录。为什么要这样?...先在分页工具条上添加一个删除按钮,代码如下: { iconCls: "picture-delete", handler: me.onDelete, scope: me, disabled: true,
要记住,扩展要写在Scripts\ExtJS\Ux目录下,因为在路径的设置中,扩展目录是指向这里的。在该目录下创建一个名为PicManager.js的脚本文件。
return Helper.MyFunction.WriteJObjectResult(success, total, msg, ja); } 从代码中可以看到,使用LINQ真的太方便了,分页就是小菜一碟
这是ExtJS 4新添加的模型的功能,相当实用。 模型定义好以后,就要定义了Store了。Store除了要定义用户的外,因为要设置用户角色,所以还要定义用户角色的Store。...Ext包中将CheckColumn.js文件复制到Ext\ux目录下,并添加requires配置项,代码如下: requires:["Ext.ux.CheckColumn"], 接着要在顶部工具栏添加一个分页工具条
)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS...boy'}, {id:2,name:'lisi', age:20,sex:'gril'} ] }); demo 下载 https://github.com/ningmengxs/Extjs.git
Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs...text/html; charset=utf-8" /> <script type="text/javascript" src="@Url.Content("Scripts/ExtJs/Ext-lang-zh_CN.js...Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs
继上一节中简单的实现了登录之后http://www.cnblogs.com/aehyok/archive/2013/04/20/3033296.html,现在我...
经过前几节系列文章,现在只剩下利用swfupload来上传图片的功能了,在ExtJs十一(ExtJs Mvc图片管理之一)中有它的下载地址和加入项目的说明。
controller 层 alias: 'widget.创建别名 initComonent: function () { }' demo 下载 https://github.com/ningmengxs/Extjs.git
领取专属 10元无门槛券
手把手带您无忧上云