http://cam.taoke.alimama.com/event.php?pid=mm_10972871_0_0&eventid=100012
这里主要是后台的异步树上的一些Action.和一个FormPanle,代码挺全
由于工作时间的需要，没有太多的时间给大家写注释了，如果有什么不明白的话，可以给我评论，我会即使的回复...
function createField(fieldLabel, id, name1, value) {
var field = new Ext.form.TextField({
fieldLabel : fieldLabel,
width : 380,
itemCls : 'all-field',
clearCls : 'allow-float',
allowBlank : false,
name : name1,
value : value
});
return field;
}
function saveHandler(win, requestUrl, node, formPanel, isUpdate) {
/*
* Ext.MessageBox.show({ title:'请稍候', msg:'保存中，请稍后...', progress:true,
* buttons: {cancel:'取消'} });
*/
var form = formPanel.getForm();
form.submit({
url : requestUrl,
waitMsg : '保存中，请稍候...',
params : {},
success : function(response, request) {
if (!isUpdate) {
Ext.MessageBox.confirm("状态", "保存成功,继续添加吗？", function(btn) {
if (btn != 'yes') {
win.close();
}
});
} else {
Ext.MessageBox.alert('状态', '保存成功!');
win.close();
}
if (node.isLeaf()) {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
} else {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
}
},
failure : function() {
Ext.MessageBox.alert('状态', '保存失败!');
if (node.isLeaf()) {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
} else {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
}
}
});
}
// 修改form
function updateForm(node, id, title, win, requestUrl, value, isUpdate) {
var form0 = new Ext.FormPanel({
id : id,
labelWidth : 75, // label settings here cascade unless overridden
frame : true,
title : title,
bodyStyle : 'padding:5px 5px 0',
width : 350,
defaults : {
width : 230
}
});
var nameField = createField('章节名称', 'createItemText' + id + node.id,
'name', value);
form0.add(nameField);
form0.addButton({
text : '保存',
handler : function() {
saveHandler(win, requestUrl, node, form0, isUpdate);
}
});
return form0;
}
// 创建form
function createForm(node, id, title, win, requestUrl, value, isUpdate) {
var form0 = new Ext.FormPanel({
id : id,
labelWidth : 75, // label settings here cascade unless overridden
frame : true,
title : title,
bodyStyle : 'padding:5px 5px 0',
width : 500
// defaults : {
// width : 230
// }
});
var nameField = createField('章节名称', 'createItemText' + id + node.id,
'name', value);
var unitField = createField('组织名称', 'createItemText' + id + node.id,
'unit', value);
var areaField = new Ext.form.TextArea({
fieldLabel : '章节编辑',
// width:980,
// x:400,
// y:400,
// itemCls:'all-field',
// clearCls:'allow-float',
// allowBlank:true,
// style:"width:100px;height:60px;",
// autocomplete: "off",
// height:400,
height : 400,
width : 500,
grow : false,
name : 'sectionText'
});
form0.add(nameField);
form0.add(unitField);
form0.add(areaField);
form0.addButton({
text : '保存',
handler : function() {
saveHandler(win, requestUrl, node, form0, isUpdate);
}
});
return form0;
}
// 编辑form
function editorForm(node, id, title, win, requestUrl, value, isUpdate) {
var form0 = new Ext.FormPanel({
id : id,
labelWidth : 75, // label settings here cascade unless overridden
frame : true,
title : title,
bodyStyle : 'padding:5px 5px 0',
width : 500,
// defaults : {
// width : 1230
// },
reader : new Ext.data.JsonReader({
root : 'list',
fields : [{
name : 'sectionText'
}]
})
});
// var
// nameField=createField('章节名称','createItemText'+id+node.id,'sectionText',value
// );
var nameField = new Ext.form.TextArea({
fieldLabel : '章节编辑',
grow : false,
// inputType : 'textarea',
height : 450,
width : 500,
// labelWidth : 1000,
// growMin : 5,
// labelStyle : 'width:1000px;height:1000px',
// growMax:true,
// width:980,
// x:400,
// y:400,
// itemCls:'all-field',
// clearCls:'allow-float',
// allowBlank:false,
// style:"width:300px;overflow-y:visible",
name : 'sectionText'
});
form0.add(nameField);
form0.addButton({
text : '保存',
handler : function() {
saveHandler(win, requestUrl, node, form0, isUpdate);
}
});
var id = node.id;
form0.getForm().load({
url : '/getSectionText/?id=' + id,
waitMsg : 'Loading'
});
return form0;
}
// 2 创建 tab panel
function createTabPanel(node, e, type, win) {
var createUrl = '/createSection/?id=' + node.attributes.id;
var updateUrl = '/updateSection/?id=' + node.attributes.id;
var editorUrl = '/editorSection/?id=' + node.attributes.id;
var panel = new Ext.TabPanel({
// el: 'hello-tabs',
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false
});
var form0 = createForm(node, 'form0' + node.id, '新建子章节', win, createUrl,
'', false);
var form1 = updateForm(node, 'form1' + node.id, '修改章节名称', win, updateUrl,
node.text, true);
var form2 = editorForm(node, 'form2' + node.id, '章节编辑', win, editorUrl, '',
true);
panel.add(form2);
panel.add(form0);
panel.add(form1);
return panel;
}
// 组装
function itemManage(node, e) {
var type = "电子书章节管理"
// create the window on the first click and reuse on subsequent clicks
var win = Ext.getCmp('win' + type + node.id);
if (!win) {
win = new Ext.Window({
title : type,
id : 'win' + type + node.id,
layout : 'fit',
maximizable : true,// 最大化
collapsible : true,// 可折叠
width : 800,
height : 600,
// closeAction:'hide',
plain : true
});
var tab = createTabPanel(node, e, type, win);
win.add(tab);
}
win.show();
}
// grid.addListener('rowdbclick',function(){
// alert("123");
// });
Ext.ux.makeMenu = function(node, event, title, requestUrl) {
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont' + node.id,
items : [{
id : node.id + "menu",
text : title,
// 增加菜单点击事件
handler : function() {
Ext.Ajax.request({
url : requestUrl,
params : {
},
success : function(response, request) {
Ext.MessageBox.alert("状态", "删除成功", function() {
});
if (node.isLeaf()) {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
} else {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
}
},
failure : function() {
// Ext.MessageBox.hide();
Ext.MessageBox.alert('状态', '删除失败!');
if (node.isLeaf()) {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
} else {
var root = node.getOwnerTree().root;
root.reload();
root.expand(true, true);
}
}
});
}
}]
});
event.preventDefault();
rightClick.showAt(event.getXY());// 取得鼠标点击坐标，展示菜单
};
分享到：
相关推荐
在这个"EXT简单的增删改查"项目中，开发者利用EXTJS与SQLServer数据库相结合，实现了基本的数据管理功能，包括添加（Add）、删除（Delete）、修改（Update）和查询（Query）。 1. EXTJS的基本概念： - 组件...
在EXT JS中，进行增删改查操作是Web应用程序中常见的功能需求，尤其在数据管理界面。EXT JS提供了一个强大的组件库，可以帮助开发者构建出功能丰富的用户界面。下面将详细解释EXT JS中如何实现这些基本操作。 首先...
首先，让我们深入了解一下Ext中的"增删改查"（CRUD）操作。CRUD代表创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)，这是任何数据库应用的基础。在Ext中，我们通常会使用Store组件来处理这些操作。Store...
要实现增删改查，我们需要创建一个包含`ColumnModel`的GridPanel，定义列和数据绑定。使用`EditorGridPanel`可开启单元格编辑。对于添加，可以添加一个工具栏按钮，绑定`add()`方法。删除操作通常通过行的右键菜单或...
这个"Extjs实现了增删改查（增加了动态树）上次升级版"项目，显然是利用ExtJS的功能来实现了一个完整的数据操作功能，包括添加、删除、修改和查询，同时还集成了一项新的特性——动态树视图。 动态树视图是ExtJS中...
通过这样的方式，ZTree和DWR的结合使用，不仅提升了用户体验，减少了不必要的网络传输，还使得后台数据的更新与前台展示无缝对接，实现了高效、流畅的异步加载树形菜单。在实际项目中，这种技术组合广泛应用在权限...
"EXT后台管理"是一个基于ExtJS前端框架，结合PHP后端语言和MySQL数据库构建的小型应用程序系统。..."EXT后台管理"系统展示了如何将这些技术融合在一起，为用户提供一个功能完备、操作便捷的后台管理平台。
在"增删改查"操作中，Store会触发加载、添加、删除和更新数据的事件。 4. **Grid**：EXT Grid是展示表格数据的组件，常用于数据查看和编辑。用户可以通过Grid进行选择、排序、过滤和编辑数据。在"EXT后台经典实例...
2. 创建一个新的store，并使用这个数组作为数据源。 3. 将新的store赋值给ComboBox的store属性，以更新其选项。 例如： ```javascript var treeNodes = tree.getStore().getRange(); var comboBoxData = []; for ...
在这种情况下，我们通常会遇到一个问题，即如何将树形结构的数据加载到前台，以便用户可以更方便地操作它。通常，我们会采用异步加载的方式，即每次用户点击某个节点时，后台再生成该节点的子节点，前台再将其加载...
接下来，我们将围绕标题中提到的ExtJs常用增删改查操作，以及在描述和部分给定内容中出现的相关知识点，进行详细的说明。 首先，我们要明白，在ExtJs中，增删改查通常是通过与后端服务（如Java后端）进行通信来实现...
综上所述，"ssh+extjs4.0grid增删改查"是一个涵盖了Java Web开发多个层面的主题，包括后端的SSH框架整合和数据库操作，以及前端的JavaScript客户端应用开发。通过这种方式，可以构建出一个完整的、具有动态数据展示...
为了更好地理解"ext前后台交互实例"的实践应用，我们可以通过一个具体的场景来说明： 假设有一个在线商城的用户列表页面，该页面需要实时显示用户的最新信息。前端采用JSP技术构建页面布局，并利用Ajax异步请求后端...
7. **实例分析** - 博客可能会通过一个实际的例子展示如何在ExtJS应用中设置和调用后台接口，包括请求的构建、响应的处理以及错误的处理。 总的来说，这篇博客可能旨在帮助读者理解如何在ExtJS应用中有效地与后台...
总结，结合ExtJS和JSP，我们可以创建一个动态的、异步加载的树形视图，通过JSP在服务器端生成数据，然后在客户端使用ExtJS进行渲染和交互。这种方案在展示大量层次化数据时，既提供了良好的用户体验，又兼顾了性能。
总结，EXT.NET的树加载和实现涉及到多个方面，包括数据源、数据绑定、模型、视图、事件处理、异步加载以及节点操作等。理解并掌握这些知识点，将有助于你在实际项目中灵活运用EXT.NET的树形控件。在学习过程中，参考...
EXT是一个强大的JavaScript库，特别适合构建富客户端应用。在EXT框架中，树（Tree）组件是一种常见的数据结构，用于展示层级关系的数据。EXT树的动态加载能力是其一大亮点，它允许我们按需加载节点，从而减少初始...
`EXTJS动态树的实现举例+示例代码.rar`和`Y梨Ext动态树的完整示例代码.rar`等文件提供了实际的实现代码，帮助开发者理解如何配置和使用异步加载。 3. **API文档**： `Ext+中文文档-API.rar`和`Ext_Database.rar`...
EXT 3.0是其一个版本，它引入了许多增强功能和改进，包括更丰富的组件、更好的性能以及对各种浏览器的良好支持。在EXT中，树（Tree）和表格（Grid）是两种重要的数据展示组件，它们可以单独使用，也可以结合成树表...
总之，这个动态加载Ext.tree的JSON数据工具类是解决前端与后端数据交互问题的一个实用方案，通过合理的编程技巧，可以实现高效、流畅的用户体验。在开发过程中，理解并掌握这种数据加载机制对于提升Web应用性能至关...