Sencha Architect使用treepanel的简单demo
2012-12-24 22:39
323 查看
树形菜单是管理系统必备的控件之一,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是显示的内容
3)fields属性
完成后如下图
3)配置root
在编辑区输入
保存即可,然后我们再配置多两个属性即可
4.设置mytreepanel的数据源为myjsontreestore即可
4.保存整个工程,在工具栏按save即可,然后我们重新启动tomcat,在浏览器输入http://localhost:8080/ssh/treepanel/app.html就可以看到效果了
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就可以看到效果了
相关文章推荐
- MAC下使用OpenCV的实例简单Demo
- 一个简单的demo学习Android远程Service(AIDL的使用)
- ajax小demo---CORS的原理分析及简单使用
- mybatis的简单使用和demo
- KindEditor简单的Demo使用
- Unity 3D中 Ulua-UGUI简单的Demo——热更新的具体流程、使用说明
- java中urlrewrite使用文档(简单demo)
- FileDialog简单使用demo
- COCOS2D-X之使用CURL下载图片的一个简单Demo
- 简单破解 Sencha Architect 2.2 (ExtJs Designer)
- 最近使用echarts写的一个简单demo
- 使用Kotlin实现Android简单Demo,对比JAVA实现分析具体语法不同之处(二)
- OCR(光学字符识别)的简单解析与使用(内含 Demo)
- 一个简单的demo学习Android远程Service(AIDL的使用)
- StringTokenizer的介绍以及简单的使用demo
- 使用游标循环表的简单DEMO
- 简单易用的安装文件制作工具NSIS的使用demo示例
- 简单破解 Sencha Architect 2.2
- 使用Sencha Architect开发Sencha Touch应用的整理
- volley框架简单使用demo