ExtのGridPanelとStruts 2.0のインタラクティブ表示
最近Extで小さなプログラムを作って、GridPanelを使っている間にいくつかの問題に遭遇しましたが、最後に解決して、たくさん得て、書いてみんなと分かち合います.
まず,インタフェース表示層にGridPanelを用いてデータを表示するには,具体的なコードは以下の通りである.
bodyラベルには、対応するdivが表示されます.
strutsでxmlプロファイルのコード部分は次のとおりです.
また、jsonのあるプラグインは導入しなければならないことを覚えています.具体的なプラグインは本稿の添付ファイルにあります.
Javaコードのセクションは次のとおりです.
はい、これでいいです.やってみよう!
まず,インタフェース表示層に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;
}
}
はい、これでいいです.やってみよう!