哪位高手有ext通用的grid的例子和源码

Question

如题，最好是 增删查改都有，感激不尽

Answer 1

//inser.js
insert = function(ds) {
Ext.QuickTips.init();// 用来提示信息
Ext.form.Field.prototype.msgTarget = 'side';// 统一指定错误提示方式
var userTxt = new Ext.form.TextField({
fieldLabel : '用户名称',
name : 'username',
anchor : '98%'
})
var pwdTxt = new Ext.form.TextField({
fieldLabel : '用户密码',
name : 'password',
anchor : '98%'
}) var myForm = new Ext.form.FormPanel({
labelAlign : 'right',
labelWidth : 60,
frame : true,
items : [{
xtype : 'fieldset',
title : '增加用户',
autoHeight : true,
items : [{// 第1行
layout : 'column',
items : [{
columnWidth : 1,
layout : 'form',
items : userTxt
}]
}, { // 第2行
layout : 'column',
items : [{
columnWidth : 1,
layout : 'form',
items : pwdTxt
}]
}]
}],
buttons : [{
text : '提交',
handler : function() {
if (myForm.getForm().isValid()) {
Ext.MessageBox.show({
msg : '正在提交，请稍等...',
progressText : 'Saving...',
width : 300,
wait : true,
waitConfig : {
interval : 200
},
icon : 'download',
animEl : 'saving'
});
myForm.form.submit({
url : "../../Jbs_Opt_Servlet",
method : "POST",
params :{
flag :'add'
},
success : function(form, action) {
var flag = action.result.success;
if (flag == "true") {
Ext.MessageBox.alert("恭喜","提交成功!");
insert_Win.close();
ds.reload();
}
},
failure : function(form, action) {
Ext.MessageBox.alert("提示!", "提交失败!");
}
});
}
}
}, {
text : '重置',
handler : function(){
myForm.form.reset();
}
}]
}); var insert_Win = new Ext.Window({
plain : true,
layout : 'form',
resizable : true, // 改变大小
draggable : true, // 不允许拖动
closeAction : 'close',// 可被关闭 close or hide
modal : true, // 模态窗口
width : 200,
autoHeight : true,
title : '增加记录',
items : [myForm],// 嵌入数据
buttonAlign : 'center',
loadMask : true
}); insert_Win.show();}

Answer 2

//update.js
update = function(ds,idValue) {
Ext.QuickTips.init();// 用来提示信息
Ext.form.Field.prototype.msgTarget = 'side';// 统一指定错误提示方式
var userTxt = new Ext.form.TextField({
fieldLabel : '用户名称',
name : 'username',
anchor : '98%'
})
var pwdTxt = new Ext.form.TextField({
fieldLabel : '用户密码',
name : 'password',
anchor : '98%'
})


var myForm = new Ext.form.FormPanel({
labelAlign : 'right',
labelWidth : 60,
frame : true,
reader : new Ext.data.JsonReader({
root : "root"
}, [{
name : "username"
}, {
name : "password"
}]),
items : [{
xtype : 'fieldset',
title : '修改用户',
autoHeight : true,
items : [{// 第1行
layout : 'column',
items : [{
columnWidth : 1,
layout : 'form',
items : userTxt
}]
}, { // 第2行
layout : 'column',
items : [{
columnWidth : 1,
layout : 'form',
items : pwdTxt
}]
}]
}],
buttons : [{
text : '提交',
handler : function() {
if (myForm.getForm().isValid()) {
Ext.MessageBox.show({
msg : '正在提交，请稍等...',
progressText : 'Saving...',
width : 300,
wait : true,
waitConfig : {
interval : 200
},
icon : 'download',
animEl : 'saving'
});
myForm.form.submit({
url : "../../Jbs_Opt_Servlet",
method : "POST",
params : {
flag : 'upd',
id : idValue
},
success : function(form, action) {
var flag = action.result.success;
if (flag == "true") {
Ext.MessageBox.alert("恭喜","提交成功!");
insert_Win.close();
ds.reload();
}
},
failure : function(form, action) {
Ext.MessageBox.alert("提示!", "提交失败!");
}
});
}
}
}, {
text : '重置',
handler : function() {
myForm.form.reset();
}
}]
}); var insert_Win = new Ext.Window({
plain : true,
layout : 'form',
resizable : true, // 改变大小
draggable : true, // 不允许拖动
closeAction : 'close',// 可被关闭 close or hide
modal : true, // 模态窗口
width : 500,
autoHeight : true,
title : '修改记录',
items : [myForm],// 嵌入数据
buttonAlign : 'center',
loadMask : true
}); insert_Win.show(); myForm.form.load({
url : '../../Jbs_SelXq_Servlet',
method : 'POST',
params : {
id : idValue
},
waitMsg : '正在载入数据...',
success : function(form, action) {
var flag = action.result.success;
if (flag = "true") {
Ext.Msg.alert("恭喜", "数据载入成功!");
} else {
Ext.Msg.alert("抱歉", "数据载入失败!");
}
},
failure : function(form, action) {
Ext.MessageBox.alert("编辑", "载入失败");
}
});}

Answer 3

//main.js
Ext.onReady(function() {
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect : true
});
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '用户名',
dataIndex : 'username'
}, {
header : '密码',
dataIndex : 'password'
}]);
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : ''
}),
reader : new Ext.data.JsonReader({
root : 'root'
}, [{
name : 'username'
}, {
name : 'password'
}, {
name : 'id'
}])
}); var grid = new Ext.grid.GridPanel({
ds : ds,
cm : cm,
sm : sm,
width : 800,
height : 400,
autoSizeColumns : true,
loadMask : true,
trackMouseOver : true
}); var toolbar = new Ext.Toolbar([{
text : '增加',
handler : function() {
insert(ds);
}
}, "-", {
text : '删除',
handler : function() {
Del_jbs(ds, grid);
}
}, "-", {
text : '修改',
handler : function() {
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.Msg.alert("提示", "请选择要操作的一项记录！");
} else {
var idValue = record.get("id");
update(ds, idValue);
}
}
}, "-", {
text : '查询',
handler : function() {
ds.reload();
}
}]); var panel = new Ext.Panel({
renderTo : 'mainPanel',
width : 800,
items : [toolbar, grid]
});
// ds.load(); var Del_jbs = function(ds, grid) {
var record = grid.getSelectionModel().getSelected();
if (!record) {
Ext.Msg.alert("删除操作", "请选择要删除的一项！");
} else {
Ext.Msg.confirm("确认提示框", "您确认删除" + record.get("jbdm") + "的记录吗?",
function(id) {
if (id == "yes") {
Ext.Ajax.request({
url : "../../Jbs_Delete_Servlet?id="
+ record.get("id"),
method : "POST",
waitMsg : "正在执行对为 " + record.get("id")
+ " 的删除操作",
success : function(result) {
var flag = Ext.util.JSON
.decode(result.responseText).success;
if (flag == "true") {
ds.reload();
Ext.Msg.alert("恭喜", "数据删除成功！");
} else {
Ext.Msg.alert("抱歉", "数据删除失败！");
}
},
failure : function(result) {
Ext.Msg.alert("抱歉", "数据删除操作失败！");
}
});
} else if (id == "no") {
}
});
}
};
})