Extjs 4.2 +Struts2 实现数据动态加载
2014-11-29 11:48
435 查看
//自定义一个的js
function commodityQuery() {
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// Set up a model to use in our Store
Ext.define('Commodity', {
extend: 'Ext.data.Model',
fields: [
{name: 'commodityId', type: 'int'},
{name: 'commodityName', type: 'string'},
{name: 'price', type: 'float'},
{name: 'agio', type: 'float'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Commodity',
proxy: {
type: 'ajax',
url : 'commodityQuery',
successProperty:'success',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: {start:0,limit:4}
});
var gridPanel = Ext.create('Ext.grid.Panel', {
width : 586,
height : 375,
store : store,
columns : [ {
text : "商品编号",
dataIndex : "commodityId",
sortable : true
}, {
text : "商品名称",
dataIndex : "commodityName",
sortable : true
}, {
text : "商品价格",
dataIndex : "price",
sortable : true,
autoWidth : 50
}, {
text : "商品折扣",
dataIndex : "agio",
sortable : true
} ],
forceFit : true,
bbar : [ Ext.create("Ext.toolbar.Paging", {
store : store,
displayInfo : true,
displayMsg : "显示 {0} - {1} 条,共计 {2} 条",
emptyMsg : "没有任何记录",
width : "100%"
}) ]
});
var commodityQueryWindow = Ext.create("Ext.window.Window", {
width : 600,
height : 400,
title : "商品信息查询",
resizable : false,
modal : true,
items : gridPanel
});
commodityQueryWindow.show();
}
**********************
Struts.xml 中的配置
//method 可以写成DMI方式
<action name="commodityQuery" class="com.rjxy.action.CommodityQueryAction" method="getCommodity" >
<result type="json">
<param name="root">responseJson</param>
</result>
</action>
**********************
CommodityQueryAction中的变量及方法
private String msg;
private List<Commodity> list;
private Integer totalCount;
private Map responseJson;
private SaleDaoImpl dao;
private Integer start;
private Integer limit;
/**
* Query Commodity list.
*/
public String getCommodity(){
Map<String, Object> map = new HashMap<String, Object>();
try{
conn = GetConnection.getConn();//jdbc连接,网友可以用hibernate
dao = new SaleDaoImpl();
list = dao.queryAllOrder();
if(list != null){
this.setTotalCount(list.size());
map.put("results", list);
map.put("totalCount", totalCount);
this.setResponseJson(map);
}
return SUCCESS;
}catch(Exception e){
e.printStackTrace();
return ERROR;
}
本文出自 “学习” 博客,请务必保留此出处http://kefly.blog.51cto.com/1109349/1584415
function commodityQuery() {
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// Set up a model to use in our Store
Ext.define('Commodity', {
extend: 'Ext.data.Model',
fields: [
{name: 'commodityId', type: 'int'},
{name: 'commodityName', type: 'string'},
{name: 'price', type: 'float'},
{name: 'agio', type: 'float'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Commodity',
proxy: {
type: 'ajax',
url : 'commodityQuery',
successProperty:'success',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: {start:0,limit:4}
});
var gridPanel = Ext.create('Ext.grid.Panel', {
width : 586,
height : 375,
store : store,
columns : [ {
text : "商品编号",
dataIndex : "commodityId",
sortable : true
}, {
text : "商品名称",
dataIndex : "commodityName",
sortable : true
}, {
text : "商品价格",
dataIndex : "price",
sortable : true,
autoWidth : 50
}, {
text : "商品折扣",
dataIndex : "agio",
sortable : true
} ],
forceFit : true,
bbar : [ Ext.create("Ext.toolbar.Paging", {
store : store,
displayInfo : true,
displayMsg : "显示 {0} - {1} 条,共计 {2} 条",
emptyMsg : "没有任何记录",
width : "100%"
}) ]
});
var commodityQueryWindow = Ext.create("Ext.window.Window", {
width : 600,
height : 400,
title : "商品信息查询",
resizable : false,
modal : true,
items : gridPanel
});
commodityQueryWindow.show();
}
**********************
Struts.xml 中的配置
//method 可以写成DMI方式
<action name="commodityQuery" class="com.rjxy.action.CommodityQueryAction" method="getCommodity" >
<result type="json">
<param name="root">responseJson</param>
</result>
</action>
**********************
CommodityQueryAction中的变量及方法
private String msg;
private List<Commodity> list;
private Integer totalCount;
private Map responseJson;
private SaleDaoImpl dao;
private Integer start;
private Integer limit;
/**
* Query Commodity list.
*/
public String getCommodity(){
Map<String, Object> map = new HashMap<String, Object>();
try{
conn = GetConnection.getConn();//jdbc连接,网友可以用hibernate
dao = new SaleDaoImpl();
list = dao.queryAllOrder();
if(list != null){
this.setTotalCount(list.size());
map.put("results", list);
map.put("totalCount", totalCount);
this.setResponseJson(map);
}
return SUCCESS;
}catch(Exception e){
e.printStackTrace();
return ERROR;
}
本文出自 “学习” 博客,请务必保留此出处http://kefly.blog.51cto.com/1109349/1584415
相关文章推荐
- Extjs4.2 表格动态数据加载,以及动态选择分页条目,前后台详解
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- struts2 无刷新调用action 实现页面数据动态加载
- dh: 实现iframe 自适应高度的问题(初始化和动态加载数据的时候)
- ExtJS中FormPanel实现数据加载和提交
- Extjs4.2+webAPI+EF实现分页以及webapi的数据传值
- Android Trick 3: GridView动态加载数据情况下,选中状态的实现
- ExtJS中FormPanel实现数据加载和提交(转)
- Extjs创建多个application实现多模块MVC动态加载。。
- 如何更优雅的实现ExtJS的前端MVC模式下一个App多个Controller的动态加载
- Extjs4——实现动态的grid(即实现数据库表数据的显示)
- Asp.net结合Extjs实现一次加载整个树和动态加载树
- 用Extjs实现分页自动加载数据的Ajax实现
- ExtJS+Struts 实现树的动态加载小例子
- dhtmlXTree动态加载struts2中action的xml数据
- extjs 动态加载数据后再火狐上显示而在ie上不显示
- Listview动态加载网络数据Activity大概实现
- ExtJS中FormPanel实现数据加载和提交(转载)
- ExtJS中FormPanel实现数据加载和提交
- treepanel动态加载数据实现代码