官方文档api： https://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html
一、与后台交互并实现分页
我们可以从官方api看到数据源store的定义
我们要将数据展示出来，需要渲染到gridpanel中，gridpanel需要如下基本数据
这里最后做说明，解决跨域通过jsonp
需要 model(数据模型)、proxy(数据代理)、reader(数据读取器)等，这三个基本满足所需效果，autoload：自动加载，
接下来定义一个panel，将gridpanel放进去，user.js文件如下(非跨域)
Ext.define("Admin.view.user.user", {
extend: 'Ext.panel.Panel',
xtype: 'user',// 将用在在main.js
requires: [
// 当引用其他js时，加入依赖，如controller，viewModel等
],
layout: 'border',
height: window.innerHeight - 50,
defaults: {
collapsible: false,
split: false
},
viewModel:{
stores:{
infostore:{
pageSize:6,//每页多少条数据
model: new Ext.data.Model({
fields:[
{name:'userId',type:'int'},
{name:'userName',type:'string'},
{name:'userBir',type:'string'}
]
}),
proxy: {
type: "ajax",
url: "/good/getUsers",//请求url
actionMethods : {
read : 'POST',
},//以post方式提交
reader: {
type: 'json',
rootProperty: 'data',//数据
totalProperty : 'rows',//数据总数
}
},
autoLoad: true,//自动加载
}
}
},
items: [
{
xtype: "gridpanel", //gridpanel
selType: "checkboxmodel",//多选框
title: "信息管理",
region: 'center',
border: true,
bind:{
store:'{infostore}'//将数据绑定到当前panel中，
},
columns: [
{ text: '序号', sortable: true, dataIndex: 'userId', align: 'center' },
{ text: '名称', sortable: true, dataIndex: 'userName', align: 'center' },
{ text: '日期', sortable: true, dataIndex: 'userBir', align: 'center' }],
// 根据columns中的datandex字段进行赋值，该字段需要和接收的数据名称一致，
bbar: {
xtype: "pagingtoolbar", //分页工具
displayInfo: true,
displayMsg: '显示{0}-{1}条，共{2}条',
emptyMsg: '无数据'
}
},
],
}); 我的请求返回的json数据如下：
{
"success": true,
"msg": "成功",
"data": [{
"userId": 1,
"userName": "雄安",
"userBir": "2019-03-13"
}, {
"userId": 2,
"userName": "小白",
"userBir": "2019-03-03"
}, {
"userId": 3,
"userName": "小子",
"userBir": "2019-03-11"
}, {
"userId": 6,
"userName": "小猫",
"userBir": "2019-02-25"
}, {
"userId": 8,
"userName": "安安",
"userBir": "2019-02-03"
}, {
"userId": 12,
"userName": "大黑",
"userBir": "2019-01-27"
}],
"rows": 17
}
该项目是通过sencha cmd 一键生成的,在其基础上进行添加
接下来就是效果，在main.js中加入依赖requires: ["Admin.view.user.user"]
在原有的的items中加入
{
title: 'Tabel',
iconCls: 'fa-users',
xtype:'user',
}
二、解决跨域问题
我刚开始做的是sencha cmd启动extjs项目，然后再通过tomcat中去访问java程序，
报异常
解决方法有很多种，我尝试了很多，有一种行之有效，就选用了jsonp
java代码需要自己另写一段代码callback
JSONObject obj = new JSONObject();
obj.put("rows", list.size());
obj.put("data", list);
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
if (jsonP) {
out.write(cb + "(");
}
out.print(obj);//写回的json数据
if (jsonP) {
out.write(");");
}
关键部分到了，需要修改Extjs中store的proxy代理
proxy: {
type: 'jsonp',
url:"http://localhost:8888//getForm1" ,
//callbackKey: 'theCallbackFunction',
extraParams : {
// "userId" : id //如需传递参数
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty : 'rows'
}
}, 我的请求返回的jsonp数据如下
Ext.data.JsonP.callback4({"data":[{"userBir":"2019-03-13","userId":1,"userName":"雄安"},{"userBir":"2019-03-03","userId":2,"userName":"小白"},{"userBir":"2019-03-11","userId":3,"userName":"小子"},{"userBir":"2019-02-25","userId":6,"userName":"小猫"},{"userBir":"2019-02-03","userId":8,"userName":"安安"},{"userBir":"2019-01-27","userId":12,"userName":"大黑"}],"rows":17});
上面属于接收数据，Extjs提交数据请求如下：
Ext.data.JsonP.request({
url: 'http://localhost:8888/setForm',
timeout: 300000,
params: ar.getValues(),
callbackKey: "jsonPCallback",
success: function(result) {
console.log(result);
},
failure: function(result) {
alert(result);
}
})
// 当你要返回成功或者失败是也需要进行callback写回，同上，然后request中的success或failure会生效，例：
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
if (jsonP) {
out.write(cb + "(");
}
out.print(JSON.toJSON("{\"success\":\"success\"}"));
if (jsonP) {
out.write(");");
}这是我的解决办法，还有其他方法，有比较简单易懂的，还请路过的伙伴留下你的见解，(^o^)