"在ExtJS 4版本的MVC架构中,动态地利用TreePanel实现数据的加载和处理是一种常见的前端开发需求。本篇文章主要介绍了如何通过Ajax请求与服务器交互,获取JSON数据,并在TreePanel上展示数据。以下步骤详细展示了这一过程: 1. 首先,创建一个`Ext.data.TreeStore`实例(`varTreeStore`),它用于存储和管理树形数据。在这个例子中,使用了`Ext.create`方法,传递类型参数`'Ext.data.TreeStore'`,并配置了一个Ajax代理(`proxy`),指定数据来源为URL`<%=Url.Action("GetTreeJson","WareHouseVoucherItem")%>`,这个URL指向后端处理数据的控制器方法。 2. 接着,创建一个`Ext.tree.Panel`实例(`varTreeMater`),即TreePanel本身,设置了一些基本属性,如标题(空字符串`''`)、区域定位('west',通常放置在窗口的左边)、树节点可见性(`rootVisible: false`)以及样式类(`cls: 'tree'`)。它的大小被限制为200x200像素,还包含了一个工具栏(`dockedItems`)用于操作。 3. 工具栏上的"ѡȷ"按钮(图标为`x-ok`)定义了一个处理函数,当用户点击时,会获取当前选中的树节点(`getChecked()`),并将这些节点的ID存入数组。如果无任何节点被选中,函数返回null。 4. 然后,通过`typeMaterialStore.load()`方法,发送一个新的Ajax请求到服务器,参数`params`中包含了之前筛选出的节点ID列表(`TypeIds`)。这一步实现了根据用户的交互动态加载与之关联的数据。 5. 通过这种方式,用户可以实时地在TreePanel上进行选择,然后通过点击事件触发数据的加载,从而实现了前端与后端数据的动态交互。这种设计在处理大量或需要实时更新的数据时非常实用,提升了用户体验。 总结来说,本文介绍了如何在ExtJS 4 MVC框架下利用TreePanel和Ajax技术实现动态JSON数据的加载,适合对前端开发、特别是ExtJS应用有深入理解的开发者参考和实践。"
Javascript代码
1.var TreeStore = Ext.create('Ext.data.TreeStore', {
2. proxy: {
3. type: 'ajax',
4. url: '<%= Url.Action("GetTreeJson", "WareHouseVoucherItem")%>'
5. }
6. });
7. var TreeMater = Ext.create('Ext.tree.Panel', {
8. title: '物资类型',
9. region: 'west',
10. store: TreeStore,
11. rootVisible: false,
12. cls: 'tree',
13. height: 200,
14. width: 200,
15. dockedItems: [{
16. xtype: 'toolbar',
17. items: {
18. text: '选择确认', //
19. iconCls: 'x-ok',
20. handler: function() {
21. var records = TreeMater.getView().getChecked();
22.
23. ids = [];
24. Ext.Array.each(records, function(rec) {
25. ids.push(rec.get('id'));
26. });
27.
29. return null;
30. }
31. typeMaterialStore.load({
32. params: {
33. TypeIds: ids
34. }
35. });
36. }
37. }
38.
39. });
var TreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: '<%= Url.Action("GetTreeJson", "WareHouseVoucherItem")%>'
}
});
var TreeMater = Ext.create('Ext.tree.Panel', {
title: '物资类型',
region: 'west',
store: TreeStore,
rootVisible: false,
cls: 'tree',
height: 200,
width: 200,
dockedItems: [{
xtype: 'toolbar',
items: {
text: '选择确认', //
剩余7页未读,继续阅读
- 粉丝: 5
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦