http://cam.taoke.alimama.com/event.php?pid=mm_10972871_0_0&eventid=100012
最近刚做了Ext的后台操作，我也是刚接触Ext有好多都是边学边做,所以把部分代码写下来,希望能够方便大家，方便自己...
//导包的地方就不多说了
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>电子书列表</title>
<link rel="stylesheet" type="text/css"
href="/js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="/js/ext/MultiselectItemSelector-3.0/Multiselect.css" />
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all-debug.js"></script>
<script type="text/javascript"
src="/js/ext/MultiselectItemSelector-3.0/Multiselect.js"></script>
<script type="text/javascript"
src="/js/ext/app/book/InOutManageWindow.js"></script>
<script type="text/javascript"
src="/js/ext/MultiselectItemSelector-3.0/DDView.js"></script>
<script type="text/javascript"
src="/js/ext/UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif';
</script>
</head>
<body>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '/js/ext/app/img/s.gif';
</script>
<script type="text/javascript" src="/js/ext/app/book/createBook.js"></script>
<script type="text/javascript">
//ds是从服务器端拿到的一些JSON的数据
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/AdminBookList/'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'bookList',
fields : [{
name : 'bookID'
}, {
name : 'name'
}, {
name : 'author'
}, {
name : 'keyWord'
}, {
name : 'bookTypeIndex'
}, {
name : 'url'
}, {
name : 'bookFile'
},{
name:'description'
}]
})
});
//分页读取的参数
ds.load({
params : {
start : 0,
limit : 20
}
});
//点击列表时会异步的加载一个formPanle
var sm = new Ext.grid.CheckboxSelectionModel({
// var sm = new Ext.grid.RowSelectionModel({
// singleSelect: true,
listeners : {
rowselect : function(sm, row, rec) {
var form = Ext.getCmp("book-form").getForm();
form.loadRecord(rec);
form.findField("multiselect").setValue(rec.get("bookTypeIndex"));
var bookID = rec.get('bookID');
addTree(bookID);
// t=addTree(bookID);
}
}
});
//加载异步树
function addTree(bookID) {
var ss = Ext.getCmp("sectionStructure1");
if (ss) {
ss.destroy();
}
var sectionStructure = new Ext.Panel({
// columnWidth : 0.2,
// xtype:'panel',
title : '结构',
// renderTo:'sectionStructure',
layout : 'fit',
autoHeight : true,
border : false
});
//具体的把一本树展现成树形的结构,可以在枝，叶上做修改
var data = new Ext.tree.TreeLoader({
url : '/tree/?bookID=' + bookID
});
var root = new Ext.tree.AsyncTreeNode({
text : '根',
draggable : false,
rootFlag : true
});
var tree = new Ext.tree.TreePanel({
id : 'sectionStructure1',
renderTo : 'sectionStructure',
width : 1000,
autoScroll : true,
useArrows : true,
animate : true,
containerScroll : true,
rootVisible : false,
root : root,
loader : data
});
tree.on('dblclick', itemManage);
tree.on('contextmenu', outItemTreeContextMenu);
root.expand(true, true);
}
Ext.onReady(function() {
var bd = Ext.getBody();
var cm = new Ext.grid.ColumnModel([sm,
// new Ext.grid.RowNumberer(),
{
header : 'ID',
width: 30,
dataIndex : 'bookID',
sortable : true,
editor : new Ext.form.TextField({
allowBlank : false
})
}, {
header : '书名',
dataIndex : 'name'
}, {
header : '作者',
width: 80,
dataIndex : 'author'
}, {
header : '关键字',
width: 80,
dataIndex : 'keyWord'
}, {
header : '是否有文件',
dataIndex : 'bookFile'
},{
header:'描述',
dataIndex: 'description'
}]);
var multiselect = new Ext.ux.Multiselect({
id : "multiselect",
xtype : "multiselect",
fieldLabel : "类型",
name : "bookTypeID",
dataFields : ["bookTypeID", "name"],
store : dsBookType,
valueField : "bookTypeID",
displayField : "name",
width : 150,
height : 200,
allowBlank : false,
legend : "Multiselect",
tbar : [{
text : "重置",
handler : function() {
form0.getForm().findField("bookTypeID").reset();
}
}]
});
var s_pannel = new Ext.FormPanel({
height : 60,
labelWidth : 80,
renderTo : 'grid',
baseCls : 'x-plain',
defaults : {
width : 150,
height : 20
},
defaultType : 'textfield',
items : [{
fieldLabel : '作者',
id : 'author',
name : 'author'
}, {
fieldLabel : '书名',
id : 'bookName',
name : 'bookName'
}]
});
// create the Grid
ds.on('beforeload', function() {
Ext.apply(this.baseParams, {
author : Ext.get('author').dom.value,
bookName : Ext.get('bookName').dom.value
});
});
var grid = new Ext.grid.EditorGridPanel({
title : '电子书列表',
sm : sm,
width : 600,
height : 600,
fram : true,
el : 'grid',
ds : ds,
cm : cm,
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : ds,
cm : cm,
displayInfo : true,
// displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
displayMsg : '',
emptyMsg : "没有记录"
}),
listeners : {
render : function(g) {
g.getSelectionModel().selectRow(0);
},
delay : 10
// Allow rows to be rendered.
}
});
grid.addListener('rowcontextmenu', rowmenu);
function rowmenu(grid, rowindex, e) {
e.preventDefault();
rightClick.showAt(e.getXY());
}
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
text : '删除电子书',
handler : delBook
}]
});
function delBook() {
var c = grid.selModel.selections.keys;
if (c.length > 0) {
Ext.MessageBox.confirm('警告', '确认要删除所选记录?', doBook);
} else {
Ext.MessageBox.alert('提示', '最少需要选择一条记录!');
}
}
function doBook(btn) {
if (btn == 'yes') {
var selectedRows = grid.selModel.selections.items;
var jsonData = '';
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
if (i == 0) {
jsonData = jsonData + row.data['bookID'];
} else {
jsonData = jsonData + ',' + row.data['bookID'];
}
}
Ext.MessageBox.show({
msg : '正在请求数据, 请稍侯',
progressText : '正在请求数据',
width : 300,
wait : true,
waitConfig : {
interval : 200
}
});
Ext.Ajax.request({
url : '/deleteBook/',
method : 'POST',
params : {
bookIDs : jsonData
},
callback : function(options, success, response) {
if (success) {
Ext.MessageBox.hide();
Ext.MessageBox.alert("消息", '删除成功');
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试", response.responseText);
}
},
failure : function(response, options) {
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告", "出现异常错误！请联系管理员！");
},
success : function(response, options) {
Ext.MessageBox.hide();
grid.getStore().reload();
}
})
}
}
grid.addListener('rowdblclick', rowcontextmenuFunc);
// grid.render();
var action = new Ext.Action({
text : '新建',
handler : createBookWin
});
var winParent = window.opener;
if (winParent) {
grid.addListener('rowcontextmenu', rightClickFn);
function doChooseBook() {
var selectedRow = grid.getSelectionModel().getSelected();
var winParent = window.opener.document;
var url_add = winParent.getElementById('url_add');
var url_update = winParent.getElementById('url_update');
if (selectedRow) {
var bookID = selectedRow.data['bookID'];
var s = "showBookDetail/?bookID=" + bookID;
if (url_add != null) {
url_add.value = s;
}
if (url_update != null) {
url_update.value = s;
}
}
window.close();
}
var rightClick = new Ext.menu.Menu({
id : 'rightClickCont',
items : [{
text : '选中',
handler : doChooseBook
}]
});
function rightClickFn(grid, rowindex, e) {
e.preventDefault();
rightClick.showAt(e.getXY());
}
}
var gridForm = new Ext.FormPanel({
id : 'book-form',
bbar : [action],
tbar : [s_pannel, {
xtype : "tbseparator"
}, {
text : ' 搜索',
cls : "x-btn-text-icon",
handler : function() {
// 这里是关键，重新载入数据源，并把搜索表单值提交
ds.load({
params : {
start : 0,
limit : 20,
author : Ext.get('author').dom.value,
bookName : Ext.get('bookName').dom.value
}
})
}
}],
frame : true,
labelAlign : 'left',
title : '电子书列表',
bodyStyle : 'padding:5px',
width : 1000,
layout : 'column',
items : [{
columnWidth : 0.5,
layout : 'fit',
items : grid
}, {
columnWidth : 0.3,
xtype : 'fieldset',
labelWidth : 90,
title : '详情',
defaults : {
width : 140
},
defaultType : 'textfield',
autoHeight : true,
bodyStyle : Ext.isIE
? 'padding:0 0 5px 15px;'
: 'padding:10px 15px;',
border : false,
style : {
"margin-left" : "10px",
"margin-right" : Ext.isIE6
? (Ext.isStrict ? "-10px" : "-13px")
: "0"
},
items : [{
fieldLabel : 'ID',
name : 'bookID',
readOnly : true
}, {
fieldLabel : '书名',
name : 'name'
}, {
fieldLabel : '作者',
name : 'author'
},{
fieldLabel : '描述',
name : 'description'
}, multiselect, {
xtype : 'button',
text : '更改',
handler : function() {
gridForm.getForm().submit({
url : '/AdminUpdateBasicBook/',
waitMsg : '保存中，请稍候...',
success : function(response, request) {
ds.reload();
Ext.MessageBox.alert('成功');
},
failure : function() {
Ext.MessageBox.alert('失败');
}
});
}
}
]
}
]
});
var p = new Ext.Panel({
width : 1000,
title : '结构',
renderTo : 'sectionStructure',
layout : 'fit',
autoHeight : true,
border : false
});
gridForm.render('bd');
form0.addButton({
text : '保存',
handler : function() {
form0.getForm().submit({
url : '/AdminCreateBasicBook/',
waitMsg : '保存中，请稍候...',
success : function(response, request) {
Ext.MessageBox.alert('成功');
ds.reload();
},
failure : function() {
Ext.MessageBox.alert('失败');
}
});
}
});
});
</script>
<div id="grid" style="height: 265px;"></div>
<div><span><div id="bd"></div></span></div>
<span><div id="sectionStructure"></div></span>
</body>
</html>
由于工作的需要，就暂时的写到这里吧，以后有时间在一点一点的给大家慢慢写全
分享到：
相关推荐
在这个"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后台经典实例...
1. 遍历树的节点，创建一个包含所需字段的对象数组。 2. 创建一个新的store，并使用这个数组作为数据源。 3. 将新的store赋值给ComboBox的store属性，以更新其选项。 例如： ```javascript var treeNodes = tree....
在这种情况下，我们通常会遇到一个问题，即如何将树形结构的数据加载到前台，以便用户可以更方便地操作它。通常，我们会采用异步加载的方式，即每次用户点击某个节点时，后台再生成该节点的子节点，前台再将其加载...
接下来，我们将围绕标题中提到的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应用性能至关...