前台:
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'订货会编码',width:120,dataIndex:'dhhCommonId'},
{header:'订货会名称',width:200,dataIndex:'dhhName'},
{header:'供货月',width:120,dataIndex:'supplymonth'},
{header:'供货段',width:120,dataIndex:'supplysection'},
{header:'供货日',width:120,dataIndex:'supplydate'},
{header:'创建时间',width:180,dataIndex:'createdate'},
{header:'创建人',width:120,dataIndex:'createuser'}
]);
// 默认情况下列是可排序的
cm.defaultSortable = true;
var store = new Ext.data.JsonStore({
url:'../../om/supplySection.do?method=findPageSupplySection',
totalProperty:'totalProperty',
root:'root',
fields:[
{name: 'ssJavaid'},
{name: 'dhhCommonId'},
{name: 'dhhName'},
{name: 'supplymonth'},
{name: 'supplysection'},
{name: 'supplydate'},
{name: 'createdate'},
{name: 'createuser'}
]
});
var orderColumnGrid = new Ext.grid.GridPanel({
height:370,
bodyStyle:'width:100%;',//宽度用了样式的写法
stripeRows:true,//隔行换色
loadMask: {msg:'正在加载数据,请稍侯……'},
store:store,
cm: cm,
sm:sm,
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPageSize(), //列表显示多少行
pageSize:10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load({params:{start:0,limit:10}});
其中,store是从后台获得json串的,在列表的最后要加上store.load({params:{start:0,limit:10}});触发store调URL获得json串数据,当然store的写法很多这个不多说。
json串格式:
如
:{totalProperty:100,root:[{id:0,name:’name0’,descon:’descon0’},{id:1,name:’name1’,descon:’descon1’},{id:2,name:’name2’,descon:’descon2’}]
}
“totalProperty”是列表总条数,跟store的totalProperty:'totalProperty'单引号的那个名字一样就行了,又如:store里totalProperty:'total'单引号里的名字改为'total',则json串为"]:{total:100,。。。,root同理。
plugins:
grid的bba多了一个rplugins:new Ext.ux.Andrie.pPageSize(), //列表显示多少行
这是一个下拉框,功能是“每页显示多少行”且支持分页,是我从网上DOWN的资源。使用: 引用<script type="text/javascript" src="../../resources/js/pPageSize.js"></script>(路径自己改),然后在bbar里加上就行了,附件在最后附上。
后台:
关于分页的后台代码不多说,说一下分页需要的参数,向后台传入的参数为:start、limit,分别表示从第start条开始,查询limit条数据,当点击下一页的时候start会随之变化。
返回时的代码:
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(str);
其中str是你拼好的json串,格式在上面已经提到了。
2.列表Ext.grid.GridPanel增删查改
2.1增加
定义
var tbars = ['->',// 右对齐
'-', {
text : '<img src="../../resources/images/img/add.gif"/>新增',
tooltip : '新增订货分段记录',
handler : addOrderColumn
}, '-'];
在GridPanel里加入一行tbar:tbars,
这样在列表的表头上面就会出现一个“新增”按钮,新增调用一个funciont函数,所有funciont中用到的组件都写在方法里,打开和关闭时利于创建、销毁,
代码:
var addOrderColumn = function() {
// 弹出窗口的按钮集合
var orderColumnButtons = [{
xtype : 'submit',
text : '保存',
handler : function() {
if(orderColumnForm.getForm().isValid()){
//新增时判断供货段截止月不小于开始月
if(Ext.get('ssStartDate').getValue() > Ext.get('ssEndDate').getValue()){
Ext.MessageBox.alert("友情提示", "[供货段开始月]应小于等于[供货段截止月]!");
return false;
}
orderColumnForm.getForm().submit({
url:'../../om/supplySection.do',
params:{method:'saveSupplySection'},
method:'post',
waitMsg:'正在保存,请稍等...',
success:function(form,action){
orderColumnWindow.destroy();
Ext.Msg.alert("友情提示","保存目标成功!",
function(){
store.reload();
},this
);
},
failure:function(form,action){
Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试!");
}
});
}
}
}, {
text : '取消',
handler : function() {
orderColumnWindow.destroy();
}
}];
var dhhStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url:'../../om/oM.do?method=findAllOMs'
}),
reader : new Ext.data.JsonReader({
root : 'root'
},[
{name : 'javaid',mapping : 'javaid'},
{name : 'omName',mapping : 'omName'}
])
});
// 订货会名称
var dhhmc = new Ext.form.ComboBox({
fieldLabel : '订货会',
hiddenName:'javaid',
autoDestroy : true,
store : dhhStore,
valueField : 'javaid',
displayField : 'omName',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择订货会',
selectOnFocus : true,
forceSelection:true,
editable : true,
width : widthValue
});
dhhStore.load();
// 订货会组表单
var orderColumnForm = new Ext.FormPanel({
// title: '经销商开户申请及提交',
bodyStyle : 'padding:5px',
frame : true,
layoutOnTabChange : true,
autoHeight : true,
autoWidth : true,
labelWidth : 150,
labelAlign : 'right',
items : [dhhmc,{
xtype : 'datefield',
fieldLabel : '供货段开始月',
name : 'ssStartDate',
emptyText : 'YYYY-MM',
format: 'Y-m',
allowBlank:false,
width : 150
},{
xtype : 'datefield',
fieldLabel : '供货段结束月',
emptyText : 'YYYY-MM',
format: 'Y-m',
name : 'ssEndDate',
allowBlank:false,
width : 150
}],
buttons : orderColumnButtons
});
// 创建表单结束
// 将表单放到一个窗口中,并显示
var orderColumnWindow = new Ext.Window({
title : "订货会组信息表单",
width : 400,
height : 200,
autoScroll : true,
collapsible : true,
maximizable : true,
layout : 'fit',
// plain:true,
// bodyStyle:'padding:5px;',
modal : true,
items : orderColumnForm
});
orderColumnWindow.show();
return orderColumnForm;
};
如果新增的时候想要初始化一些数据的话
在“新增”按钮加上类似这样一段代码
handler : function() {
var dhhId = selectDhhForm.form.findField('javaid').getValue();
var hqForm = addOrderColumn ();
hqForm.load({
url : '../../om/dhhDate.do?method=initDhhDate&dhhId='+ dhhId,
waitMsg : '正在载入数据,请稍等...',
method:"get",
success:function(form,action){},
failuer : function(){
Ext.Msg.alert('友情提示', '数据加载失败请重试!');
}
});
}
即打开addOrderColumn 窗口时,给窗口里的字段赋值
增加时在后台用FormBean直接取值(哎,struts1),然后该保存就保存该变动就动动,值得一提的是,后台要返回成功或失败的json信息,前台接到成功的信息后销毁窗口orderColumnWindow.destroy();,然后刷新列表的数据store.reload();(参考保存按钮代码),界面不刷新不跳转很人性化。
2.2删除
在bbars里再加一个按钮
var tbars = ['->',// 右对齐
'-',
{
text : '<img src="../../resources/images/img/add.gif"/>新增',
tooltip : '新增订货分段记录',
handler : addOrderColumn
}, '-',{
text:'<img src="../../resources/images/img/delete.gif"/>删除',
tooltip : '删除订货分段记录',
handler : deleteSS
},'-'];
删除比增加相比要简单的多,在grid的store里有一个'ssJavaid',这个是显示列表时JSON串传进来的,虽然不在界面显示,但是每条记录已经有这个ID了,“修改”时会具体说到这点,删除时根据这个ID去后台删就行了。
var deleteSS = function(){
var record = sm.getSelected();
if(record&&sm.getCount()==1){
Ext.MessageBox.confirm('提示信息', '您确定要删除所选的记录吗?', function(buttonobj){
if(buttonobj=='yes'){
var myCon = new Ext.data.Connection();
waitMsg:'正在删除数据,请稍等...';
myCon.request({
url:'../../om/supplySection.do?method=deleteSupplySection&ssId=' + record.get('ssJavaid'),
method:'post',
waitMsg:'正在删除,请稍等...',
successProperty:'success',
success:function(transport){
Ext.Msg.alert("友情提示","成功删除数据!",
function(){
store.reload();
},this
);
},
failure:function(form,action){
Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试!");
}
},this);
}
});
}else{
Ext.Msg.alert('友情提示','您必须选择一行数据以便进行办理!');
}
};