Sencha Architect使用treepanel的简单demo

树形菜单是管理系统必备的控件之一，extjs中的树形菜单非常强大，使用也非常方便，基本满足了我们开发的所有需求。基本上成为了标配，下面本文将使用Sencha Architect来制作一个简单的treepanel菜单。

 

1.打开Sencha Architect新建一个ext js 4.1.x工程，保存到我们之前创建的ssh工程里面去，方便我们使用tomcat进行调试。

也可以创建一个简单的web工程，如果想使用ssh框架的可以参考我之前写的文章，只要能正常运行就行。建议还是用ssh吧，新手都倒腾一下有好处的。

2.拖动一个treepanel到设计窗体中，如下图

在project inspector视图中我们可以看到在views节点将会多了一个mytreepanel的控件如下图

修改菜单栏的标题

鼠标左键选中mytreepanel，然后在config面板的查找编辑框输入title（也可以不输入慢慢找...）

 

这时候可以看到treepanel的标题变成我们输入的东西。

 

3.创建一个数据源store，在extjs4.x中的treepanel支持tree store，所以我们在添加一个tree store到design中，如图所示

这时同样会在我们的project inspector窗口中看到我们的stroes节点多了一个MyJsonTreeStore的数据源。如下图，MyJsonTreeStore会有一个红色包围的感叹号，这是因为我们有些属性没有配置好，点击可以查看详细的信息。

 

接下来我们配置一下MyJsonTreeStore的属性。

1）配置url属性为http://localhost:8080/ssh/treepanel.json

2）在WebRoot中创建treepanel.json文件，内容如下

[
	{ "text": "parent1", "expanded": true, "children": [
	    { "id":1 ,"type":1, "text": "menu1", "leaf": true },
	    { "id":2 ,"type":2, "text": "menu2", "leaf": true}
	] }
]

这里配置了树形视图的数据，一个父节点和两个子节点，text是显示的内容

3）fields属性

 

 

完成后如下图

3）配置root

 

在编辑区输入

{
    expanded: true
}

保存即可，然后我们再配置多两个属性即可

4.设置mytreepanel的数据源为myjsontreestore即可

 

4.保存整个工程，在工具栏按save即可，然后我们重新启动tomcat，在浏览器输入http://localhost:8080/ssh/treepanel/app.html就可以看到效果了