- 浏览: 966690 次
文章分类
最新评论
-
18335864773:
很多公司项目 都在使用pageoffice 来操作word,e ...
用java生成word文档 -
Gozs_cs_dn:
请问下博主, 怎样将sitemesh3.xsd绑定 sitem ...
SiteMesh3配置 -
Rose_06:
springside4.0quick-start.bat报错原因 -
ilemma:
我也是刚参见工作啊,经理让自学这个,有些东西不太懂,能不能发个 ...
Apache Shiro在Web中的应用 -
shanbangyou:
你废了
程序员上班打酱油的方法
在学习Ext-2.2时,我们通常会先研究它自带的一些例子,今天发现一个关于paging的例子,它是运用php获取json格式数据的,
而我发现网上很多人都是通过java获取后台数据,所以我写了一个jsp获取json格式数据的例子,可供像我一样的初学者参考:
这里共涉及到几个关键的文件:paging.js 和paging.html(ext-2.2\examples\grid目录下) ,
paging.html 的代码不用变,只需要小改一下paging.js就可以了,
就是把 url: 'http://extjs.com/forum/topics-browse-remote.php' 这一行改成
url: 'paging_json.jsp' :
paging.js
- /*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- *
- * http://extjs.com/license
- */
- Ext.onReady(function(){
- // create the Data Store
- var store = new Ext.data.JsonStore({
- root: 'topics',
- totalProperty: 'totalCount',
- idProperty: 'threadid',
- remoteSort: true,
- fields: [
- 'title', 'forumtitle', 'forumid', 'author',
- {name: 'replycount', type: 'int'},
- {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
- 'lastposter', 'excerpt'
- ],
- // 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'
- url: 'paging_json.jsp'
- })
- });
- store.setDefaultSort('lastpost', 'desc');
- // pluggable renders
- function renderTopic(value, p, record){
- return String.format(
- '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
- value, record.data.forumtitle, record.id, record.data.forumid);
- }
- function renderLast(value, p, r){
- return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
- }
- var pagingBar = new Ext.PagingToolbar({
- pageSize: 25,
- store: store,
- displayInfo: true,
- displayMsg: 'Displaying topics {0} - {1} of {2}',
- emptyMsg: "No topics to display",
- items:[
- '-', {
- pressed: true,
- enableToggle:true,
- text: 'Show Preview',
- cls: 'x-btn-text-icon details',
- toggleHandler: function(btn, pressed){
- var view = grid.getView();
- view.showPreview = pressed;
- view.refresh();
- }
- }]
- });
- var grid = new Ext.grid.GridPanel({
- el:'topic-grid',
- width:700,
- height:500,
- title:'ExtJS.com - Browse Forums',
- store: store,
- trackMouseOver:false,
- disableSelection:true,
- loadMask: true,
- // grid columns
- columns:[{
- id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
- header: "Topic",
- dataIndex: 'title',
- width: 420,
- renderer: renderTopic,
- sortable: true
- },{
- header: "Author",
- dataIndex: 'author',
- width: 100,
- hidden: true,
- sortable: true
- },{
- header: "Replies",
- dataIndex: 'replycount',
- width: 70,
- align: 'right',
- sortable: true
- },{
- id: 'last',
- header: "Last Post",
- dataIndex: 'lastpost',
- width: 150,
- renderer: renderLast,
- sortable: true
- }],
- // customize view config
- viewConfig: {
- forceFit:true,
- enableRowBody:true,
- showPreview:true,
- getRowClass : function(record, rowIndex, p, store){
- if(this.showPreview){
- p.body = '<p>'+record.data.excerpt+'</p>';
- return 'x-grid3-row-expanded';
- }
- return 'x-grid3-row-collapsed';
- }
- },
- // paging bar on the bottom
- bbar: pagingBar
- });
- // render it
- grid.render();
- // trigger the data store load
- store.load({params:{start:0, limit:25}});
- });
- /**
- * @class Ext.ux.SliderTip
- * @extends Ext.Tip
- * Simple plugin for using an Ext.Tip with a slider to show the slider value
- */
- Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
- minWidth: 10,
- offsets : [0, -10],
- init : function(slider){
- slider.on('dragstart', this.onSlide, this);
- slider.on('drag', this.onSlide, this);
- slider.on('dragend', this.hide, this);
- slider.on('destroy', this.destroy, this);
- },
- onSlide : function(slider){
- this.show();
- this.body.update(this.getText(slider));
- this.doAutoWidth();
- this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
- },
- getText : function(slider){
- return slider.getValue();
- }
- });
/* * Ext JS Library 2.2.1 * Copyright(c) 2006-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function(){ // create the Data Store var store = new Ext.data.JsonStore({ root: 'topics', totalProperty: 'totalCount', idProperty: 'threadid', remoteSort: true, fields: [ 'title', 'forumtitle', 'forumid', 'author', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt' ], // 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' url: 'paging_json.jsp' }) }); store.setDefaultSort('lastpost', 'desc'); // pluggable renders function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } var pagingBar = new Ext.PagingToolbar({ pageSize: 25, store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", items:[ '-', { pressed: true, enableToggle:true, text: 'Show Preview', cls: 'x-btn-text-icon details', toggleHandler: function(btn, pressed){ var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }] }); var grid = new Ext.grid.GridPanel({ el:'topic-grid', width:700, height:500, title:'ExtJS.com - Browse Forums', store: store, trackMouseOver:false, disableSelection:true, loadMask: true, // grid columns columns:[{ id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "Topic", dataIndex: 'title', width: 420, renderer: renderTopic, sortable: true },{ header: "Author", dataIndex: 'author', width: 100, hidden: true, sortable: true },{ header: "Replies", dataIndex: 'replycount', width: 70, align: 'right', sortable: true },{ id: 'last', header: "Last Post", dataIndex: 'lastpost', width: 150, renderer: renderLast, sortable: true }], // customize view config viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ if(this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, // paging bar on the bottom bbar: pagingBar }); // render it grid.render(); // trigger the data store load store.load({params:{start:0, limit:25}}); }); /** * @class Ext.ux.SliderTip * @extends Ext.Tip * Simple plugin for using an Ext.Tip with a slider to show the slider value */ Ext.ux.SliderTip = Ext.extend(Ext.Tip, { minWidth: 10, offsets : [0, -10], init : function(slider){ slider.on('dragstart', this.onSlide, this); slider.on('drag', this.onSlide, this); slider.on('dragend', this.hide, this); slider.on('destroy', this.destroy, this); }, onSlide : function(slider){ this.show(); this.body.update(this.getText(slider)); this.doAutoWidth(); this.el.alignTo(slider.thumb, 'b-t?', this.offsets); }, getText : function(slider){ return slider.getValue(); } });
paging_json.jsp
- <%@ page language="java" pageEncoding="UTF-8"%>
- <%
- String json = "{totalCount:2,topics:[{threadid:1,forumid:1,forumtitle:'Ext;Help',title:'How to add hrefs dynamically into accordion panel',author:'venu',lastposter:'venu',lastpost:1235010582,excerpt:'ccccccccccccccccccccc',replycount:3},{threadid:2,forumid:2,forumtitle:'Ext;Help',title:'How to add hrefs dynamically into accordion panel',author:'venu',lastposter:'venu',lastpost:1235010592,excerpt:'dddddddddddddddd.',replycount:3}]}";
- response.getWriter().write(json);
- System.out.print(json);
- %>
发表评论
-
extjs 总结
2010-08-14 00:00 1429问题:使用Grid时,如果出现列标题与复选框错位 使用定义样 ... -
grid 表格奇偶行颜色
2010-08-07 23:48 900用stripeRows: true区分不明显 <scr ... -
grid加竖表格线
2010-08-07 21:12 881在页面中加入 /*显示竖线*/ .x-grid ... -
FormPanel提交表单数据
2010-07-30 17:09 1688今天研究FormPanel提交表单数据研究了半天.. 终于把表 ... -
learning extjs 中文版 表单提交
2009-02-07 17:02 1535我们的表单还没有向服务器提交数据。所以我们需要添加提交按钮。 ... -
监听表单事件 learning extjs 中文
2009-02-07 17:01 3551监听表单事件 Ext让监听单击控件或按键等用户事件变得异常简 ... -
TextArea_HTMLEditor 编辑器 learning extjs 中文
2009-02-07 16:59 2818TextArea 和HTMLEditor 现在我们在表 ... -
下拉列表 learning extjs 中文
2009-02-07 16:57 1937服务器端返回json串。 String result=&qu ... -
js面向对象 learning extjs 中文
2009-02-07 16:55 1717这些年来,我们越来越重视基于浏览器到web应用。而大多数浏览器 ... -
learning ext js 电子书
2009-02-04 08:30 3958learning ext js 电子书 -
learning ext js 中文版 之 Ext的form功能是无穷的
2009-02-04 08:21 1894Ext的form功能是无穷的。按键监听,校验,错误提示和值约束 ... -
learning ext js 中文版 之 根据用户操作对话框来给出响应
2009-02-04 08:19 911现在我们可以根据用户操作对话框来给出响应。我们将加入switc ... -
learningExtjs 中文版 之 用得最多的就是Ext.get了
2009-02-04 08:15 1131Extjs之所以好用在于它可以很容易取到并操作DOM.用得最多 ...
相关推荐
使用ext2.2 struts2集成生成的一棵树,主要是对struts2返回json数据进行一些处理,树使用ext本身自带的例子
EXT实例+JSON
Ext4+JSON+Servlet/Struts2+Ext.tree.Panel+Ext.tab.Panel构建Web应用系统框架
使用ext2.0+json+jsp动态加载树的Myeclipse项目,可以直接导入Myeclipse看效果
视频得来终觉浅,还是api最靠谱 本人下载一堆spring、ext的api文档,最终选择以上打包资料,深感网上的各种视频说的太肤浅,还是api文档最全面,资料好不好,自己看,不好我负责
前段时间在忙于Hiberante3.2/3.3的开发指南的整理与学习,刚忙完发现我现在的学生在开发Ext2.2应用时有问题--不知道直接看开源的官方网站的介绍!唉,当然他们说英文不好懂,于是,我就看完了Ext官方网站的介绍,...
ext3.0+highcharts+ext时间日期控件+jquery+json
采用SSH架构实现<深入浅出ExtJs>实例,系统包括:表格,分页,表单,表格与表单的关联等等,是初学者必不可少的学习资料,经本人实际测试通过。
采用SSH架构实现<深入浅出ExtJs>实例,系统包括:表格,分页,表单,表格与表单的关联等等,是初学者必不可少的学习资料,经本人实际测试通过。
J2ee spring jdbcTemplate +springMVC ext 4.1 + json 超好用的框架 绝对对起分数 下载后不后悔 包括jar 包
ext+Json+dwr+spring+hibernate整合项目实例与资源
DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件DW CS3--EXT2.2插件
EXt3.0+struts2+json小例子 实现增删改查 基本功能 ,以功能简单实现为主 对ext的常用组件的使用,也存在一些细节上的小问题 如果有兴趣可以自己去解决 这便用的oracle做测试用的 ,你也可以改成,模拟数据测试
ext2.2 所需的几个文件:ext-all.css, ext-base.js, ext-all.js,还有对应的API帮助文档
ext+json+dwr+spring+hibernate整合项目实例与相关资源
ext-grid+json简单应用,可以直接套用... 可以跑的工程.sql脚本...
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
为了满足学习新技术的朋友们,自己搭建了一个struts2+spring2.5+jdbc+ext+json框架的实例。
Struts2+Spring2.5+jdbc+Ext+json实例用到的lib包。
@@@java+struts2+ext+json(完整的示例程序)实现CRUD