Extjs4获取不到grid数据
时间:2011-08-14
来源:互联网
前台:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs4/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel',
'Ext.ux.form.SearchField'
]);
Ext.onReady(function(){
var store = null;
Ext.create('Ext.Button', {
text: '导出数据',
x:30,
y:30,
renderTo: 'button',
handler: function(grid) {
Ext.Ajax.request({
url: 'GridServlet',
params: {
id: 1
},
success: function(response){
var jsonObj = response.responseText;
store.load(jsonObj);
}
});
}
});
Ext.define('Mydata',{
extend:'Ext.data.Model',
fields:[
//第一个字段需要指定mapping,其他字段,可以省略掉。
{name:'UserName',mapping:'UserName'},
'Sex',
'Age',
'XueHao',
'BanJi'
]
});
store = Ext.create('Ext.data.Store',{
model:'Mydata'
});
//创建多选
var selModel = Ext.create('Ext.selection.CheckboxModel');
var grid = Ext.create('Ext.grid.Panel',{
store:store,
selModel:selModel,
columns:[
{text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
{text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
{text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
{text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
{text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
],
height:400,
width:480,
x:20,
y:40,
title:'Extjs4 Grid搜索',
renderTo:'grid',
disableSelection: true,//值为TRUE,表示禁止选择行
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: {
width: 300,
fieldLabel: '搜索',
labelWidth: 50,
xtype: 'searchfield',
store: store
}
},{
dock: 'bottom',
xtype: 'pagingtoolbar',
store: store,
pageSize: 2,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
emptyMsg: '没有数据'
}]
});
});
后台servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/x-json;charset=UTF-8");
String id = (String)request.getParameter("id");
PrintWriter out = response.getWriter();
StringBuffer jsonStr = new StringBuffer();
jsonStr.append("[{'Username':'李彦宏','Sex':'男','Age':25,'XueHao':00001,'BanJi':'一班'},{'Username':'李彦宏','Sex':'男','Age':25,'XueHao':00001,'BanJi':'一班'}]");
out.write(jsonStr.toString());
}
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs4/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel',
'Ext.ux.form.SearchField'
]);
Ext.onReady(function(){
var store = null;
Ext.create('Ext.Button', {
text: '导出数据',
x:30,
y:30,
renderTo: 'button',
handler: function(grid) {
Ext.Ajax.request({
url: 'GridServlet',
params: {
id: 1
},
success: function(response){
var jsonObj = response.responseText;
store.load(jsonObj);
}
});
}
});
Ext.define('Mydata',{
extend:'Ext.data.Model',
fields:[
//第一个字段需要指定mapping,其他字段,可以省略掉。
{name:'UserName',mapping:'UserName'},
'Sex',
'Age',
'XueHao',
'BanJi'
]
});
store = Ext.create('Ext.data.Store',{
model:'Mydata'
});
//创建多选
var selModel = Ext.create('Ext.selection.CheckboxModel');
var grid = Ext.create('Ext.grid.Panel',{
store:store,
selModel:selModel,
columns:[
{text: "姓名", width: 120, dataIndex: 'UserName', sortable: true},
{text: "性别", flex: 1, dataIndex: 'Sex', sortable: false},
{text: "年龄", width: 100, dataIndex: 'Age', sortable: true},
{text: "学号", width: 100, dataIndex: 'XueHao', sortable: true},
{text: "班级", width: 100, dataIndex: 'BanJi', sortable: true}
],
height:400,
width:480,
x:20,
y:40,
title:'Extjs4 Grid搜索',
renderTo:'grid',
disableSelection: true,//值为TRUE,表示禁止选择行
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: {
width: 300,
fieldLabel: '搜索',
labelWidth: 50,
xtype: 'searchfield',
store: store
}
},{
dock: 'bottom',
xtype: 'pagingtoolbar',
store: store,
pageSize: 2,
displayInfo: true,
displayMsg: '显示 {0} - {1} 条,共计 {2} 条',
emptyMsg: '没有数据'
}]
});
});
后台servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/x-json;charset=UTF-8");
String id = (String)request.getParameter("id");
PrintWriter out = response.getWriter();
StringBuffer jsonStr = new StringBuffer();
jsonStr.append("[{'Username':'李彦宏','Sex':'男','Age':25,'XueHao':00001,'BanJi':'一班'},{'Username':'李彦宏','Sex':'男','Age':25,'XueHao':00001,'BanJi':'一班'}]");
out.write(jsonStr.toString());
}
作者: wcf0987 发布时间: 2011-08-14
response.setContentType("application/x-json;charset=UTF-8");删了试试
作者: softroad 发布时间: 2011-08-14
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28