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);
%>