ExtJs mvc tree

最新推荐文章于 2019-08-01 17:42:00 发布

大JASON

最新推荐文章于 2019-08-01 17:42:00 发布

阅读量567

点赞数

分类专栏： Ext 文章标签： Ext mvc tree

本文链接：https://blog.csdn.net/qq565784544/article/details/40855535

版权

Ext 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一次写博客

1、先看下项目框架

这个就是MVC的结构啦

直接上代码

app.js

Ext.application({
			name : 'AM',
			appFolder : 'app',
			controllers : ['Users','Treeone','Left','Tabpanel','Company','Combobox'],
			launch : function() {
				Ext.create('Ext.container.Viewport', {
							layout : 'border',
							items : [{
										 
										region : 'north', // position for
										height : 50,
										 
										html:'<center><h1>电话营销管理系统</h1></center>'

									}, {
										region : 'center',
										xtype : '<span style="font-family: Arial, Helvetica, sans-serif;">treeone</span><span style="font-family: Arial, Helvetica, sans-serif;">'</span>

									}, {
										region : 'west',
										xtype : 'left',
										width : 200,
										collapsible : true
									}]
						});
			}

		});

app/controller/Treeone.js

Ext.define('AM.controller.Treeone', {

			extend : 'Ext.app.Controller',
			views : ['left.Treeone'],
			stores : ['Treeone'],
			models : ['Treeone'],
			init : function() {

				this.control({

							'treeone' : {

								itemclick : this.loadFunction

							}

						});

			},
			loadFunction : function(tree, record, item, index, eventObj) {//动态添加tabs
				var tabs = tree.ownerCt.ownerCt.ownerCt
						.child('#tabpanels');

				var treeNode = record.raw;
				var id = treeNode.id;
				var text = treeNode.text;
				var tab = tabs.getComponent(id);
				if (!tab) {
					tabs.add({
								id : id,
								closable : true,
								title : text,
								iconCls : 'employee-add',
								xtype : id

							}).show();

				} else {

					tabs.setActiveTab(tab);

				}

			}

		});

app/view/left/TreeOne.js

Ext.define('AM.view.left.Treeone', {

			extend : 'Ext.tree.Panel',
			alias : 'widget.treeone',
			store : 'Treeone',
			border : false,
			maxHeight : 600,
			minHeight:800,
			initComponent : function() {
				this.callParent(arguments);
			}

		});

app/store/TreeOne.js

Ext.define('AM.store.Treeone', {
			extend : 'Ext.data.TreeStore',
			model : 'AM.model.Treeone',
			autoLoad : true,

			root : {
				functionDes : '系统功能',
				expanded : false,
				text:'系统功能'

			},
			proxy : {
				type : 'ajax',
				url : 'data/tree.json',
				api : {
					read : 'data/tree.json'

				},
				reader : {
					type : 'json',
					successProperty: 'success'
				}
			}

		});

app/model/TreeOne.js

Ext.define('AM.model.Treeone', {
			extend : 'Ext.data.Model',
			fields : ['functionId', 'functionMappingName', 'functionDes',
					'text','id']

		});

data/tree.json

{
    "success": true,
    "children": [
        {"id":"userlist","text":"用户管理","functionId": 1, "functionMappingName": "userinfopanel","functionDes":"用户管理","iconCls" :"feed-icon","leaf": true },
        {"id":"companylist","text":"公司列表", "functionId": 2, "functionMappingName": "roleinfopanel","functionDes":"角色管理","iconCls" :"feed-icon","leaf": true }
    ]
}

以上就是Extjs 简单的mvc tree啦

有哪儿写的不好的请多多指教！！！！