最近用Ext做一个小程序,在用到GridPanel的时候遇到了一些问题,但最后都解决了
,得到了很多,写下来与大家分享。
首先,要在界面显示层用GridPanel来显示数据,具体代码如下:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"
/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
sm,
{header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
return rowIndex + 1;
}},
{header:'品牌',dataIndex:'name',sortable:true},
{header:'型号',dataIndex:'size',sortable:true},
{header:'价格',dataIndex:'price',sortable:true}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'softMachineInit.action'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'list'},//注意list,totalProperty在相应的action类中得有
//get,set方法。
Ext.data.Record.create(
[{name:'name'},
{name:'size'},
{name:'price'}
]))
});
ds.load({params:{start:0,limit:5}});
var grid = new Ext.grid.GridPanel({
id:'grid',
title:'饮水机信息表',
ds: ds,
height:300,
cm: cm,
sm: sm,
stripeRows:true,//隔行换色
loadMask:true,//在加载数据时的遮罩效果
trackMouseOver:true,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});
grid.render("grid-example");
});
</script>
在body标签里面有相应的div显示:
<div id="grid-example" style="margin: 10px;"></div>
在struts.xml配置文件中的代码部分如下:
<struts>
<package name="My" extends="json-default">
<action name="softMachineInit" class="softMachineAction" method="softMachineInit">
<result type="json">
</result>
</action>
</package>
</struts>
同时,还记着有json的插件必须引进来,具体的插件在本文的附件中。
Java代码部分如下:
public class SoftMachineAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private SoftMachine softMachine;
private SoftMachineDao softMachineDao;
private String start;
private String limit;
List list;
Long totalProperty;
public Long getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(Long totalProperty) {
this.totalProperty = totalProperty;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public void setSoftMachine(SoftMachine softMachine) {
this.softMachine = softMachine;
}
public void setSoftMachineDao(SoftMachineDao softMachineDao) {
this.softMachineDao = softMachineDao;
}
@SuppressWarnings("unchecked")
public String softMachineInit() {
this.setTotalProperty(80L);
list = new ArrayList<SoftMachine>();
try {
int index = Integer.parseInt(this.start);
int pageSize = Integer.parseInt(this.limit);
//这段代码挺重要的,通过得到index,pageSize,可以从数据
// 库来执行相应的select操作。下面的for循环是一个模拟过程
//同时,特别注意,在action类中,必须有list和totalProperty
//的get,set方法,这两个属性时与Ext中的代码心对应的。
for(int i=0;i<5;i++){
SoftMachine softMachine = new SoftMachine();
softMachine.setName("name"+i);
softMachine.setSize("size"+i);
softMachine.setPrice(Long.valueOf(77+i));
list.add(softMachine);
}
} catch (Exception ex) {
}
return SUCCESS;
}
public void setStart(String start) {
this.start = start;
}
public void setLimit(String limit) {
this.limit = limit;
}
}
好了,这样就可以了。试试吧!
分享到:
相关推荐
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
EXT GridPanel获取某一单元格的值
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
博文链接:https://zjnbshifox.iteye.com/blog/147574
Ext的gridpanel控件二次加载时丢失解决方案
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
NULL 博文链接:https://shenhaiquan.iteye.com/blog/1474328
EXT实例GridPanel. 实现简单的。
Ext.grid.ColumnModel显示不正常
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
Ext.grid.GridPanel 删除线 放到example文件夹下运行
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
ext.net gridpanel 弹出窗
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
tapestry4.02中封装ext的GridPanel组件
ext 树 gridpanel 分页 ,文件上传, tabpanel ... 的一些例子 刚学的时候做的..只要加上Ext2.0的包就可以直接运行
NULL 博文链接:https://wv1124.iteye.com/blog/741559