Pagination EXT-JS4中的分页不起作用
我被ExtJS4.1.0中的分页所困扰。我实现了分页,显示了正确的计数,但网格并没有按照页面刷新进行更新Pagination EXT-JS4中的分页不起作用,pagination,grid,extjs4,Pagination,Grid,Extjs4,我被ExtJS4.1.0中的分页所困扰。我实现了分页,显示了正确的计数,但网格并没有按照页面刷新进行更新 Ext.define('person', { extend: 'Ext.data.Model', fields: [ // the 'name' below matches the tag name to read, except 'availDate'
Ext.define('person', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'sso', type: 'string'},
{name: 'fname', type: 'string'},
// dates can be automatically converted by specifying dateFormat
{name: 'lname', type: 'string'},
{name: 'msso', type: 'string'},
{name: 'email_address', type: 'string'},
{name: 'person_status', type: 'string'}
]
});
var ds = new Ext.data.Store({
model:'person',
autoLoad: true,
//url:'/FormAction',
actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
proxy: {
type: 'ajax',
url: '/identityiq/FormAction',
reader: {
type: 'xml',
record: 'record'
},
}
});
ds.load({
params:{
start:0,
limit: 25
}
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
validateedit: function(editor, e) {
//alert('New value (validateedit): ' + e.value);
},
edit: function(editor, e) {
//alert('Old value (edit): ' + e.value);
}
}
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: ds,
dockedItems:[
{
xtype: 'pagingtoolbar',
pageSize: 25,
store:ds,
dock: 'bottom',
displayInfo: true,
displayMsg:'Displaying records {0} - {1} of {2} ',
emptyMsg:"No records to display ",
flex:1
}
], columns: [
{
text : 'SSO',
width:80,
sortable : true,
dataIndex: 'sso'
},
{
id: 'fname',
header: 'First Name',
dataIndex: 'fname',
width:100,
field: {
allowBlank: false
}
},
{
id: 'lname',
header : 'Last Name',
width:100,
sortable : true,
dataIndex: 'lname',
field: {
allowBlank: false
}
},
{
text : 'Manager SSO',
width : 80,
sortable : true,
dataIndex: 'msso'
},
{
text : 'Email Address',
width : 200,
sortable : true,
dataIndex: 'email_address'
},
{
text : 'Personstatus',
width : 80,
sortable : true,
dataIndex: 'person_status'
}
],
selModel: {
selType: 'cellmodel'
},
height: 400,
width: 700,
title: 'Array Grid',
renderTo: 'myDiv',
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
frame: true,
plugins: [cellEditing],
tbar: [
{
text: 'Save',
handler: function ()
{
alert(ds.getModifiedRecords());
console.log(ds.getModifiedRecords());
var modified_data ={};
modified_data = ds.getModifiedRecords();
for (var i = 0; i < modified_data.length; i++) {
var record = modified_data[i];
alert(record.data.fname);
}
}
}
],
});
Ext.define('person'{
扩展:“Ext.data.Model”,
字段:[
//下面的“名称”与要读取的标记名匹配,但“availDate”除外
//已映射到标记“可用性”
{name:'sso',键入:'string'},
{name:'fname',键入:'string'},
//可以通过指定dateFormat自动转换日期
{name:'lname',键入:'string'},
{name:'msso',type:'string'},
{name:'email_address',键入:'string'},
{name:'person_status',键入:'string'}
]
});
var ds=新的Ext.data.Store({
型号:'人',
自动加载:对,
//url:“/FormAction”,
行动方法:{创建:“帖子”,读:“帖子”,更新:“帖子”,销毁:“帖子”},
代理:{
键入:“ajax”,
url:“/identityq/FormAction”,
读者:{
键入:“xml”,
记录:“记录”
},
}
});
负载({
参数:{
起点:0,
限额:25
}
});
var celleediting=Ext.create('Ext.grid.plugin.celleediting'{
单击编辑:1,
听众:{
validateedit:函数(编辑器,e){
//警报('新值(validateedit):'+e.value);
},
编辑:函数(编辑器,e){
//警报(“旧值(编辑):”+e.value);
}
}
});
//创建网格
var grid=Ext.create('Ext.grid.Panel'{
门店:ds,
摘要:[
{
xtype:“pagingtoolbar”,
页面大小:25,
门店:ds,
船坞:“底部”,
displayInfo:true,
displayMsg:'显示{2}的记录{0}-{1}',
emptyMsg:“没有要显示的记录”,
弹性:1
}
],专栏:[
{
文本:“SSO”,
宽度:80,
可排序:是的,
数据索引:“sso”
},
{
id:'fname',
标题:“名字”,
数据索引:“fname”,
宽度:100,
字段:{
allowBlank:false
}
},
{
id:'lname',
标题:“姓氏”,
宽度:100,
可排序:是的,
数据索引:“lname”,
字段:{
allowBlank:false
}
},
{
文本:“管理器SSO”,
宽度:80,
可排序:是的,
数据索引:“msso”
},
{
文本:“电子邮件地址”,
宽度:200,
可排序:是的,
数据索引:“电子邮件地址”
},
{
文字:“个人状态”,
宽度:80,
可排序:是的,
dataIndex:“人员\状态”
}
],
selModel:{
selType:'cellmodel'
},
身高:400,
宽度:700,
标题:“数组网格”,
renderTo:'myDiv',
视图配置:{
是的,
enableTextSelection:true
},
框架:对,
插件:[cellEditing],
待定:[
{
文本:“保存”,
处理程序:函数()
{
警报(ds.getModifiedRecords());
log(ds.getModifiedRecords());
var-modified_data={};
modified_data=ds.getModifiedRecords();
对于(变量i=0;i
在不同的论坛上尝试了不同的版本,但没有成功。网格不会随着页面中的更改而刷新
此外,还需要对服务器端进行任何更改以实现分页
提前谢谢
- 灰烬
ServletOutputStream sos=response.getOutputStream();
setHeader(“缓存控制”,“无存储”);
setHeader(“Pragma”,“无缓存”);
setContentType(“text/xml”);
String query=“从表中选择*”;
OracleDataSource ods=新的OracleDataSource();
连接conn=ods.getConnection();
语句Statement=conn.createStatement();
ResultSet rs=语句.executeQuery(查询);
sos.println(“”);
while(rs.next()){
sos.println(“”);
sos.println(“+rs.getString”(“person\u num\u sso”)+”;
sos.println(“+rs.getString(“名字”)+”);
sos.println(“+rs.getString(“姓氏”)+”);
sos.println(“+rs.getString(“manager\u person\u num”)+”);
sos.println(“+rs.getString(“电子邮件地址”)+”);
sos.println(“+rs.getString(“person_status”)+”);
sos.println(“”);
}
sos.println(“”);
rs.close();
康涅狄格州关闭();
sos.close();
系统输出打印(“完成列表servlet”);
}捕获(IOE异常){
//TODO自动生成的捕捉块
e、 printStackTrace();
}捕获(SQLE异常){
//TODO自动生成的捕捉块
e、 printStackTrace();
}
}
虽然我不能肯定地说,但我必须看一看
ServletOutputStream sos = response.getOutputStream();
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setContentType("text/xml");
String query="select * from table'";
OracleDataSource ods = new OracleDataSource();
Connection conn = ods.getConnection();
Statement statement = conn.createStatement();
ResultSet rs = statement.executeQuery(query);
sos.println("<dataset>");
while(rs.next()) {
sos.println("<record>");
sos.println("<sso>"+ rs.getString("person_num_sso") +"</sso>");
sos.println("<fname>"+ rs.getString("first_name") +"</fname>");
sos.println("<lname>"+ rs.getString("last_name") +"</lname>");
sos.println("<msso>"+ rs.getString("manager_person_num") +"</msso>");
sos.println("<email_address>"+ rs.getString("email_address") +"</email_address>");
sos.println("<person_status>"+ rs.getString("person_status") +"</person_status>");
sos.println("</record>");
}
sos.println("</dataset>");
rs.close();
conn.close();
sos.close();
System.out.print("Done list servlet");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}