ExtJS4菜单树动态显示

0 0

ExtJS4菜单树动态显示0

用ExtJs4写一个界面，动态树菜单显示不出来。程序如下：

Ext.require(['Ext.data.*', 'Ext.tree.*', 'Ext.tab.*', 'Ext.panel.*',
		'Ext.container.Viewport']);

Ext.onReady(function() {
	Ext.QuickTips.init();
	
	 Ext.define("treeModel", { // 定义树节点数据模型
		extend : "Ext.data.Model",
		fields : [{
					name : "id",
					type : "string"
				}, {
					name : "text",
					type : "string"
				}, {
					name : "iconCls",
					type : "string"
				}, {
					name : "leaf",
					type : "boolean"
				}, {
					name : 'type',
					type : "string"
				}, {
					name : 'component',
					type : "string"
				}, {
					name : 'url',
					type : "string"
				}]
	});
	var treeStore = Ext.create('Ext.data.TreeStore', {
				model : 'treeModel',
				proxy : {
					type : 'ajax',
					url : 'user/menu'
				},
				folderSort : true
			});
	var tree = Ext.create('Ext.tree.Panel', {
				title : '问卷管理',
				animate : true, // 有滑动效果
				autoScroll : true,
				autoHeight : true,
				width : '100%',
				collapsible : true,
				expanded : true,
				rootVisible : true,
				store : treeStore
			});

	var centerTab = Ext.create('Ext.tab.Panel', {
				activeTab : 0,
				enableTabScroll : true,
				animScroll : true,
				border : true,
				autoScroll : true,
				region : 'center',
				split : true,
				items : [{
							iconCls : 'icon-activity',
							title : '首页',
							html : '<h1>hello</h1>'
						}]
			});
	var westTree = Ext.create("Ext.panel.Panel", {
				region : 'west',
				title : "系统菜单",
				width : 200,
				iconCls : "icon-tree",
				autoScroll : false,

				layout : 'accordion',
				collapsible : true,
				layoutConfig : {
					animate : true
				},
				items : [tree],
				split : true
			});
	var northTitle = Ext.create("Ext.panel.Panel", {
				height : 75,
				html : '<img src="image/title.jpg"  alt="title" />',
				region : 'north',
				split : true

			});
	Ext.create('Ext.container.Viewport', {
				layout : 'border',
				items : [northTitle, centerTab, westTree]

			});

});

从后台返回的数据如下：[{"children":[{"children":[],"component":"","description":"","iconCls":"","id":2,"leaf":false,"parentId":1,"sort":0,"text":"增加问卷","type":"URL","url":""},{"children":[],"component":"","description":"","iconCls":"","id":3,"leaf":false,"parentId":1,"sort":0,"text":"删除问卷","type":"URL","url":""},{"children":[],"component":"","description":"","iconCls":"","id":4,"leaf":false,"parentId":1,"sort":0,"text":"修改问卷","type":"URL","url":""},{"children":[],"component":"","description":"","iconCls":"","id":5,"leaf":false,"parentId":1,"sort":0,"text":"查询问卷","type":"URL","url":""}],"component":"","description":"","iconCls":"","id":1,"leaf":false,"parentId":0,"sort":0,"text":"设计问卷","type":"COMPONENT","url":""}]

但是现在这个树节点显示不出来！截图如下：

Extjs4