Ext.onReady(function(){
window.path = '<%=request.getContextPath()%>';
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = path+'/jslib/ext2.2/resources/images/default/s.gif';
init();
});
function getWidth(){
return document.body.clientWidth;
}
function getHeight(){
return document.body.clientHeight;
}
function init(){
new Ext.form.FieldSet({
title:'查询区域',
height: 'auto',
contentEl:'query-form',
collapsible:true,
renderTo:'query-area',
buttons:[
{
xtype:'button',
text:'查询'
},
{
xtype:'button',
text:'重置',
handler:function(){
document.getElementById('query-form').reset();
}
}
]
});
var fields = [
{name:'a'},{name:'b'},{name:'c'},{name:'d'}
];
var datas = [];
for(var i=0; i<100; i++){
datas.push({a:'name151-'+(i+1),b:'area',c:2009,d:'description});
}
var proxy = new Ext.data.MemoryProxy({totalProperty:datas.length,root:[]});
var store = new Ext.data.Store({
remoteSort:false,
reader:new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
},fields),
proxy: proxy
});
store.on('beforeload', function(s, params){
var start = params.params.start;
var end = start + params.params.limit;
//alert(start+", "+end +" Data's Size:"+datas.length);
proxy.data = {totalProperty:datas.length,root:datas.slice(start, end)};
});
var fw = getWidth()-15;
var gw = getWidth()-20;
var fh = Math.round(getHeight()*0.6);
new Ext.grid.GridPanel({
title:'显示区域',
width:fw,
height:fh-20,
collapsible:true,
renderTo:'show-area',
bbar: new Ext.PagingToolbar({
store:store,
pageSize:15
}),
store: store,
columns:[
new Ext.grid.RowNumberer(),
{header:'A', align:'center', width:Math.round(gw*0.3), dataIndex:'a', sortable:true},
{header:'B', align:'center', width:Math.round(gw*0.2), dataIndex:'b', sortable:true},
{header:'C, align:'center', width:Math.round(gw*0.2), dataIndex:'c', sortable:true},
{header:'D, align:'center', width:Math.round(gw*0.3), dataIndex:'d', sortable:true}
],
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
});
store.load({params:{start:0,limit:15}});
}
分享到:
相关推荐
国外论坛下载的。很好用。前台分页插件。extjs3.x适用
NULL 博文链接:https://huanglz19871030.iteye.com/blog/656046
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
Extjs的初学者写的一个Extjs的小例子,前台是Extjs后台是Servlet,将例子导入到myeclipse中,数据源换成相应的你自己的数据库连接,数据库连接在util里,就可以实现.
基于extjs ssh 注解式...前台使用extjs实现的漂亮风格 后台为ssh注解式开发 实现了学生信息的基本增删查改 拥有完美的分页功能 代码简洁 适合学习 内有具体使用方法 只需创建一个数据库即可使用 有任何问题可以PM我
9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。 5、演示json数据封装。6、演示前台和后台数据的传递...
9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...
一款很好用的免费的web页面打印工具。 设置纸张类型,如A4、A3等 设置纸张方向(横向、纵向) ...支持extjs、jquery等前台开发框架 支持php、.net、j2ee等开发并台 服务器端支持 windows,linux,unix等.
2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。5、演示json数据封装。 6、演示前台和后台数据的...
2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交...
+修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...
jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。 ...
注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...