Ext小结三
一、滚动条效果
Ext.onReady(function(){
Ext.Msg.show({
title:'wait',
msg:'loading......',
progress:true,
closable:false,
width:400
});
})
解析:
title代表显示的标题
Msg代表显示的内容
Progress 代表显示的是滚动条
closalble代表显示的内容如滚动条不可关闭
Width代表显示宽度
function fun(i,total){
return function(){
if (i==total) {
Ext.Msg.hide();
} else {
Ext.Msg.updateProgress(i/total,i*100/total + "%");
}
}
}
解析:
编写方法,逐渐改变滚动条的百分比,直至加载完毕后隐藏滚动条
Ext.Msg.updateProgress(i/total,i*100/total + "%");
第一个参数是滚动条位置的百分比
第二个参数是滚动条上显示的文字
var total = 100;
for (var i = 1; i <= total; i++) {
setTimeout(fun(i,total),i*100);
}
解析:每隔i*100 毫秒执行一次方法,改变一次滚动条状态
二、静态table实例
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true},
{header:'姓名',dataIndex:'name'},
{header:'年龄',dataIndex:'age'}
]);
//解析定义表格的列的信息,header为列名,dataIndex为列的标识,sortable代表能否排序
var data = [
['1','aa','23'],
['2','bb','24'],
['3','cc','21'],
['4','dd','18'],
['5','ee','22']
];
//解析定义数据,是一个数组中包含n多个数组
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'age'}
])
});
//解析 定义store,用于规定数据的格式
//proxy:new Ext.data.MemoryProxy(data)数据存储的代理
/*reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'age'}
]
读取data数据并规定显示格式
*/
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'student info',
cm:cm,
store:store,
autoHeight:true
});
//定义表格
//renderTo:'grid' grid是显示位置,可以是层名
//cm:cm 是表格的列的定义 cm是列定义的名称
//store:store 表示store的名称
//autoHeight表示自动匹配大小
store.load();
//表示加载数据
})
三、动态table实例(带分页)
Js:
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true},
{header:'姓名',dataIndex:'name'},
{header:'年龄',dataIndex:'age'}
]);
//定义列的信息
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'table.jsp'}),
reader:new Ext.data.JsonReader(
{totalProperty:'count',root:'data'},
[
{name:'id'},
{name:'name'},
{name:'age'}
]
)
});
/*定义store信息
* proxy:new Ext.data.HttpProxy({url:'table.jsp'})
* 此代理可以调用jsp文件
* reader:new Ext.data.JsonReader(
{totalProperty:'count',root:'data'},
[
{name:'id'},
{name:'name'},
{name:'age'}
]
)
读取json数据totalProperty:后接的是总数据数对应在返回的json数据中的属性名
root 后接的是实际数据对应返回的json数据的属性名
第二个参数是数据显示对应的位置
*/
var bbar = new Ext.PagingToolbar({
pageSize:3,
store:store,
displayInfo:true,
displayMsg:'当前显示 第{0}条 - 第{1}条 共{2}条',
emptyMsg:'none'
});
/*
* 定义分页对象
*pageSize:3 每页显示的条数
*store 代表store对象名
*displayInfo:true 是否显示内容
*displayMsg:'当前显示 第{0}条 - 第{1}条 共{2}条'
*定义显示的相关信息
*{0} 代表显示条数的起始条数
*{1}代表显示条数的结束条数
*{2}代表一共显示多少条
*emptyMsg:'none'
*没有数据时显示的内容
*/
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
title:'student info',
cm:cm,
store:store,
bbar:bbar,
autoHeight:true
});
//定义表格
//bbar:bbar 表示此表格对应的分页控件
store.load({params:{start:0,limit:3}});
//加载数据时添加参数,起始位和显示条数
})
后台jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
int start =1;
int limit = 3;
String startstr = request.getParameter("start");
String limitstr = request.getParameter("limit");
if(startstr!=null && !"".equals(startstr) && !"0".equals(startstr)){
start = Integer.parseInt(startstr);
}
if(limitstr!=null && !"".equals(limitstr) && !"0".equals(limitstr)){
limit = Integer.parseInt(limitstr);
}
//jsp 中ext 会自动传来两个参数即显示的开始为和显示的条数
//我们应根据传来的参数动态编辑传出的json数据
StringBuffer json = new StringBuffer("{count:10,data:[");
for(int i=start;i<start+limit && i<=10;i++){
json.append("{id:'"+i+"',name:'aa"+i+"',age:'"+(20+i)+"'},");
}
json.delete(json.length()-1,json.length());
json.append("]}");
//json数据中count代表一共有多少条(count 名可以自定义)
//data代表实际数据,是一个json数组
out.print(json);
%>
分享到:
相关推荐
NULL 博文链接:https://luhai1992.iteye.com/blog/628040
NULL 博文链接:https://luhai1992.iteye.com/blog/628617
ext定制:搜索框 Ext.app.SearchField的应用,效果比较好看
目录 前 言 第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 ...14.14 本章小结 483
【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx
最近在网上看见很多关于EXT下载的东西!我把个人在各个网站收集到的东西和经典的例子整理一块与大家一起分享!
1.6 本章小结 / 33 .第2章 从“hello world”开始 / 34 2.1 获取ext js 4 / 34 2.2 配置使用ext js库 / 35 2.3 编写“hello world”程序 / 37 2.4 关于ext.onready / 38 2.5 关于ext.blank_image_url / 40 ...
Ext 表单提交数据的三种方法小结,方便利用ext提交数据的朋友
Ext.Net学习笔记之button小结,需要的朋友可以参考一下
11.20 本章小结.............................................. 316 第12 章 一个完整的EXT 应用......................... 317 12.1 确定整体布局........................................ 317 12.2 使用HTML和...
ssh-orcale-ext 实现ext的分页,grid的编辑并异步保存...以及viewport等一些ext的基础知识,算是学了两个星期的小结吧。 对新手应该会有帮助。一个完整的工程, 带有.sql文件,导入表和数据,修改数据库连接就能运行。
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
ExtJS 是一个很不错的 Ajax 框架,可以用来开发带有华丽外观的富客户端应用,使得 我 们的 b/s 应用更加具有...ExtJS 的一些心得及小结,希望能帮助正在学习或准备学习 ExtJS 的朋友们快速走进 ExtJS2 .0 的精彩世界。
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 ...十二、小结 262
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b...本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。