<div id = "grid1"></div>
<div id = "grid2"></div>
<div id = "tree1"></div>
<div id = "tree2"></div>
Ext.QuickTips.init();
Ext.onReady(function() {
var fields = ["address", "company", "name", "personid"];
var pageSize = 5;
function createForm() {
var newForm = new Ext.form.FormPanel({
frame : true,
border : false,
width : 400,
labelAlign : 'right',
defaults : {
xtype : 'textfield',
width : 150
},
items : [{
name : 'name',
fieldLabel : '姓名',
allowBlank : false,
blankText : '姓名不能为空'
}, {
name : 'address',
fieldLabel : '地址',
allowBlank : false,
blankText : '地址不能为空'
}, {
name : 'company',
fieldLabel : '公司',
allowBlank : false,
blankText : '公司名称不能为空'
}, {
name : 'personid',
xtype : 'hidden'
}]
});
return newForm;
};
var cm = new Ext.grid.ColumnModel([{
header : "地址",
dataIndex : "address",
editor : new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank : false
}))
}, {
header : '公司',
dataIndex : 'company',
editor : new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank : false
}))
}, {
header : '姓名',
dataIndex : 'name',
editor : new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank : false
}))
}, {
header : '编号',
dataIndex : 'personid'
}]);
function createJsonStroe(url, fields) {
var storeTemp = new Ext.data.JsonStore({
root : 'root',
totalProperty : 'totalProperty',
url : url,
fields : fields
});
return storeTemp;
};
function createEditGridPanel(title, store, cm, sm, aftereditURL, addURL,
delURL, editURL) {
var gridTemp = new Ext.grid.EditorGridPanel({
enableDragDrop : true,
columnWidth : .4,
title : title,
store : store,
cm : cm,
sm : sm,
autoWidth : true,
autoHeight : true,
viewConfig : {
// forceFig:true
},
listeners : {
"afteredit" : function(e) {
Ext.Ajax.request({
url : aftereditURL,
params : {
id : e.record.data.personid,
field : e.field,
value : e.value
},
success : function() {
Ext.Msg.alert("提示", "修改成功！");
gridTemp.store.reload();
},
failure : function() {
Ext.Msg.alert("提示", "修改失败！");
gridTemp.store.reload();
}
});
}
},
bbar : new Ext.PagingToolbar({
pageSize : pageSize,
store : store,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录，一共{2}条记录',
emptyMsg : '没有记录',
forceFit : true
}),
tbar : new Ext.Toolbar(['-', {
text : "添加",
handler : function() {
var fm = createForm();
var win = new Ext.Window({
title : '添加用户',
modal : true,
width : 400,
buttonAlign : 'center',
items : [fm],
buttons : [{
text : '保存',
handler : function() {
if (fm.getForm().isValid()) {
fm.getForm().submit({
url : addURL,
success : function() {
gridTemp.store
.reload();
win.close();
},
failure : function() {
Ext.Msg
.alert(
"提示",
"添加数据出错，请稍后再试！");
}
});
}
}
}, {
text : '重置',
handler : function() {
fm.getForm().reset();
}
}, {
text : '取消',
handler : function() {
win.close();
}
}]
});
win.show();
}
}, '-', {
text : '删除',
handler : function() {
Ext.Msg.confirm('信息', '确定要删除？', function(btn) {
if (btn == 'yes') {
var selectRow = gridTemp
.getSelectionModel()
.getSelections();
for (var i = 0; i < selectRow.length; i++) {
var pId = selectRow[i]
.get("personid");
Ext.Ajax.request({
url : delURL,
params : {
personId : pId
},
success : function() {
}
})
}
Ext.Msg.alert("提示", "删除成功！");
gridTemp.getStore().reload();
}
})
}
}, '-', {
text : '编辑',
handler : function() {
var fm = createForm();
var record = gridTemp.getSelectionModel()
.getSelections();
if (record) {
fm.getForm().loadRecord(record[0]);
var win = new Ext.Window({
title : '编辑用户',
modal : true,
width : 400,
items : [fm],
buttonAlign : 'center',
buttons : [{
text : '保存',
handler : function() {
fm.getForm().submit({
url : editURL,
success : function() {
Ext.Msg.alert("提示",
"编辑成功！");
gridTemp.store
.reload();
win.close();
},
failure : function() {
Ext.Msg.alert("提示",
"编辑失败！");
win.close();
}
});
}
}, {
text : '重置',
handler : function() {
fm.getForm().reset();
}
}, {
text : '取消',
handler : function() {
win.close();
}
}]
})
win.show();
}
}
}])
});
return gridTemp;
};
var store = createJsonStroe("person.do?method=personList", fields);
var grid = createEditGridPanel("第一个表格", store, cm,
new Ext.grid.RowSelectionModel({
singleSelect : false
}), "person.do?method=afterEdit",
"person.do?method=savePerson", "person.do?method=deletePerson",
"person.do?method=updatePerson");
grid.render("grid1");
store.load({
params : {
start : 0,
limit : pageSize
}
});
var store2 = createJsonStroe(
"persondragtarget.do?method=persondragtargetList", fields);
var grid2 = createEditGridPanel("第二个表格", store2, cm,
new Ext.grid.RowSelectionModel({
singleSelect : false
}), "persondragtarget.do?method=afterEdit",
"persondragtarget.do?method=savePersondragtarget",
"persondragtarget.do?method=deletePersondragtarget",
"persondragtarget.do?method=updatePersondragtarget");
grid2.render("grid2");
store2.load({
params : {
start : 0,
limit : pageSize
}
});
var ddrow1 = new Ext.dd.DropTarget(grid.view.mainBody, {
ddGroup : 'GridDD',
copy : false,
notifyDrop : function(dd, e, data) {
// 选中了多少行
var rows = data.selections;
// 拖动到第几行
var index = dd.getDragData(e).rowIndex;
if (typeof(index) == "undefined") {
index = 0;
}
// 修改store
for (i = 0; i < rows.length; i++) {
var rowData = rows[i];
if (!this.copy) {
Ext.Ajax.request({
url : 'persondragtarget.do?method=deletePersondragtarget',
params : {
personId : rowData.get("personid")
},
success : function() {
}
});
store2.remove(rowData)
}
Ext.Ajax.request({
url : 'person.do?method=savePerson',
params : {
name : rowData.get("name"),
address : rowData.get("address"),
company : rowData.get("company")
},
success : function() {
},
failure : function() {
}
});
store.insert(index, rowData);
}
}
});
var ddrow2 = new Ext.dd.DropTarget(grid2.view.mainBody, {
ddGroup : 'GridDD',
copy : false,
notifyDrop : function(dd, e, data) {
if (e.getTarget() == grid2.view.mainBody) {
alert("aaaa");
return;
}
// 选中了多少行
var rows = data.selections;
// 拖动到第几行
var index = dd.getDragData(e).rowIndex;
if (typeof(index) == "undefined") {
index = 0;
}
// 修改store
for (i = 0; i < rows.length; i++) {
var rowData = rows[i];
if (!this.copy) {
Ext.Ajax.request({
url : 'person.do?method=deletePerson',
params : {
personId : rowData.get("personid")
},
success : function() {
}
});
store.remove(rowData)
}
Ext.Ajax.request({
url : 'persondragtarget.do?method=savePersondragtarget',
params : {
name : rowData.get("name"),
address : rowData.get("address"),
company : rowData.get("company")
},
success : function() {
},
failure : function() {
}
});
store2.insert(index, rowData);
}
}
});
var root = new Ext.tree.AsyncTreeNode({
id : '0',
text : '我是根'
});
var tree1 = new Ext.tree.TreePanel({
title : '第一个演示',
el : 'tree1',
root : root,
loader : new Ext.tree.TreeLoader({
dataUrl : 'tree.do?method=treeLoad'
}),
enableDrag : true,
ddGroup : 'treePanelGrounp'
});
var panel3 = new Ext.Panel({
columnWidth : .2,
id : 'target',
title : '树节点信息',
height : 300,
bbar : ['-', {
text : '加到第一个表格',
handler : function() {
if (!panel3.body.child('table')) {
alert("请从树中选择一条信息");
return ;
}
var tds = Ext.query('#showMessage table td');
var name = tds[0].innerHTML;
var address = tds[1].innerHTML;
var company = tds[2].innerHTML;
Ext.Ajax.request({
url : 'person.do?method=savePerson',
params : {
name : name,
address : address,
company : company
},
success : function() {
Ext.Msg.alert("提示", "保存成功");
Ext.get('showMessage').update("请将右边的树节点拖入panel");
store.reload();
},
failure : function() {
Ext.Msg.alert("提示", "保存失败");
}
});
}
}, '-', {
text : '加到第二个表格',
handler:function(){
if (!panel3.body.child('table')) {
alert("请从树中选择一条信息");
return;
}
var tds = Ext.query('#showMessage table td');
var name = tds[0].innerHTML;
var address = tds[1].innerHTML;
var company = tds[2].innerHTML;
Ext.Ajax.request({
url : 'persondragtarget.do?method=savePersondragtarget',
params : {
name : name,
address : address,
company : company
},
success : function() {
Ext.Msg.alert("提示", "保存成功");
Ext.get('showMessage').update("请将右边的树节点拖入panel");
store2.reload();
},
failure : function() {
Ext.Msg.alert("提示", "保存失败");
}
});
}
}, '-'],
html : '<div id = "showMessage" style="height:270px" align="center">请将右边的树节点拖入panel</div><div id = "tbb" style="height:50px"></div>',
afterRender : function() {
Ext.Panel.prototype.afterRender.apply(this, arguments);
this.dropTarget = this.body.child('div#showMessage');
var t = new Ext.XTemplate('<table style="font-size:20"><tr><th>姓名:</th><td>"{name}"</td></tr>' +
'<tr><th>公司:</th><td>{company}</td></tr>' +
'<tr><th>地址:</th><td>{address}</td>' +
'</table>');
t.compile();
var ddtg = new Ext.dd.DropTarget(this.dropTarget, {
ddGroup : 'treePanelGrounp',
notifyDrop : function(dd, e, node) {
Ext.DomHelper.overwrite('showMessage','');
t.append('showMessage',node.node.attributes);
// var msg = '<table style="font-size:20px" > <tr><th>姓名：</th><td>'
// + node.node.attributes.name
// + '</td></tr>'
// + '<tr><th>公司：</th><td>'
// + node.node.attributes.company
// + '</td></tr>'
// + '<tr><th>地址：</th><td>'
// + node.node.attributes.company
// + '</td></tr>'
// + '</table>';
// panel3.body.child('div#showMessage').update(msg);
}
});
}
});
var center = new Ext.TabPanel({
region : 'center',
activeTab : 0,
items : [{
layout : 'column',
title : '表格基本功能',
layoutConfig : {},
items : [panel3, grid, grid2]
}]
});
var west = new Ext.Panel({
width : 200,
region : 'west',
layout : 'accordion',
title : '演示向导',
defaults : {},
layoutConfig : {},
items : [tree1, {
title : '第三个演示',
html : '第三个演示'
}]
});
var view = new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
height : 80,
html : 'north'
}, west, center]
});
});