EXT 一个panel与tree结合读数据库json格式的例子

EXT刚入门，一点点研究，首先是布局，然后是树，由于自己太“披毛求疵”对美观要求特别高，连DIV的美观都要求很苛刻，所以遇到太多问题。

慢慢的东西看多了，也组合了自己的一点东西。先放两个界面：





下面，我放出部分代码

var Tree = Ext.tree;
Ext.onReady(function(){
var vport=new Ext.Viewport(
{
enableTabScroll:true,
layout:"border",
items:[
{
title:"导航菜单",
region:'west',
id:'ma',
width:200,
collapsible:true,
layoutConfig:{animate:false},
layout:'accordion',
frame:true,//设置导航条样式（圆角）和内部元素padding
bbar: [
]
},
tab
]
}
);

//使用ajax绑定目录树
Ext.Ajax.request({
url:'manageMenu.asp',
params:{'MMF':0},
success: function(resp,opts) {
var respText=Ext.util.JSON.decode(resp.responseText);
for(var i=0;i<respText.length;i++){
var id = respText[i].id;
var tree=new Ext.tree.TreePanel({
rootVisible:false,
border:false,
root:new Tree.AsyncTreeNode({id:'root_'+id,disable:true}),
loader:new Ext.tree.TreeLoader({dataUrl :'manageMenu.asp?mmf='+id+'&p='+Math.random()})

})

var tmp = new Ext.Panel({
id:"pannel_"+id,
title:respText[i].text,
iconCls:respText[i].iconCls,
//layout:'accordion',
autoWidth:true,
//html:'<div id="tree_'+id+'" style="overflow:auto;width:100%;height:100%"></div>',
items:[tree]
});
Ext.getCmp('ma').add(tmp);
Ext.getCmp('ma').doLayout();
tree.on('click',treeClick);
tree.expandAll();
}

},
failure: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
Ext.Msg.alert('错误', respText.error);
}
})
});

function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
iconCls:"plugins-nav-icon",
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+node.attributes.href+'" mce_src="'+node.attributes.href+'"></iframe>'
});
}
tab.setActiveTab(n);
}
}

var tab = new Ext.TabPanel({
xtype:'tabpanel',
deferredRender:false,
region:'center',
activeTab:0,
enableTabScroll:true,
items:[
{iconCls:"toc-icon",title:'后台首页',closable:true,autoScroll:true,html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="main.asp" mce_src="main.asp"></iframe>'},
{iconCls:"plugins-nav-icon",title:'普通面板',closable:true,autoScroll:true}
]

});

使用的icons请见

http://gwt-ext.com/demo/

部分CSS文件如下：

/*nav filter*/
.x-btn-pressed.filter-btn .x-btn-text {
background-image: url( 'http://www.gwt-ext.com/demo/images/funnel_X.gif' );
}

.filter-btn .x-btn-text {
background-image: url( 'http://www.gwt-ext.com/demo/images/funnel_plus.gif' );
}

.expand-all-btn .x-btn-text {
background-image: url( 'http://www.gwt-ext.com/demo/images/expandall.gif' );
}

.collapse-all-btn .x-btn-text {
background-image: url( 'http://www.gwt-ext.com/demo/images/collapseall.gif' );
}

/*side nav*/

.toc-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/report.gif ) !important;
}

.credits-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/photo.gif) !important;
}

.tree-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/chart_organisation.gif ) !important;
}

.windows-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_cascade.gif ) !important;
}

.combo-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/script_edit.gif ) !important;
}

.toolbar-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_view_tile.gif ) !important;
}

.grids-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/table.gif ) !important;
}

.forms-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_form_add.gif ) !important;
}

.tabs-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/tabs.gif ) !important;
}

.buttons-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/brick.gif ) !important;
}

.panels-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_osx.gif ) !important;
}

.layout-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_side_list.gif ) !important;
}

.misc-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/bullet_wrench.gif ) !important;
}

.combination-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/vcard_edit.gif ) !important;
}

.dd-category-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/layers.gif ) !important;
}

.resizable-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/shape_handles.gif ) !important;
}

.progressbar-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/film.gif ) !important;
}

.dataview-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_view_list.gif ) !important;
}

.colorpicker-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/application_view_tile.gif ) !important;
}

.datepicker-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/calendar.gif ) !important;
}

.mask-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/shading.gif ) !important;
}

.animation-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_swoosh.gif ) !important;
}

.plugins-nav-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/plugin.gif ) !important;
}

.grid-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/table.gif ) !important;
}

.settings-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_wrench.gif ) !important;
}

.folder-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_go.gif ) !important;
}

.line-chart-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/chart_curve.gif ) !important;
}

.bar-chart-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/chart_bar.gif ) !important;
}

.pie-chart-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/chart_pie.gif ) !important;
}

.new-tab-icon {
background-image: url( http://www.gwt-ext.com/demo/images/new_tab.gif ) !important;
}

.tab-icon {
background-image: url( http://www.gwt-ext.com/demo/images/tabs.gif ) !important;
}

/*common*/

.database-add-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/database_add.gif ) !important;
}

.database-delete-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/database_delete.gif ) !important;
}

.user-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/user.gif ) !important;
}

.test-spacing {
padding: 15px;
}

.x-panel-body p {
margin: 10px;
line-height: 1.25;
}

.dp-highlighter {
font-size: 11px;
font-family: monospace;
}

.dp-highlighter ol, .dp-highlighter ol li {
font-family: monospace;
}

.grid-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/grid.gif ) !important;
}

.add-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/add.gif ) !important;
}

.delete-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/delete.gif ) !important;
}

.image-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/image.gif ) !important;
}

.user-add-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/user_add.gif ) !important;
}

.user-delete-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/user_delete.gif ) !important;
}

.book-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/book_open.gif ) !important;
}

.source-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/script_edit.gif ) !important;
}

.java-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_code.gif ) !important;
}

.css-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/css.gif ) !important;
}

.html-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/html.gif ) !important;
}

.xml-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/script_gear.gif ) !important;
}

.json-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/script_code.gif ) !important;
}

.world-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/world.gif ) !important;
}

.tree-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/sitemap_color.gif ) !important;
}

.search-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_find.gif ) !important;
}

.telephone-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/telephone.gif ) !important;
}

.paste-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_paste.gif ) !important;
}

.office-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_office.gif ) !important;
}

.excel-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_excel.gif ) !important;
}

.publish-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/server_go.png ) !important;
}

.subscribe-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/server_connect.png ) !important;
}

.powerpoint-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_powerpoint.gif ) !important;
}

.word-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_word.gif ) !important;
}

.visualstudio-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_visualstudio.gif ) !important;
}

.c-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_c.gif ) !important;
}

.cpp-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_cplusplus.gif ) !important;
}

.csharp-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/page_white_csharp.gif ) !important;
}

.text-align-right {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_align_right.gif ) !important;
}

.text-align-center {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_align_center.gif ) !important;
}

.text-align-justify {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_align_justify.gif ) !important;
}

.text-align-left {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_align_left.gif ) !important;
}

.text-bold {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_bold.gif ) !important;
}

.text-italic {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_italic.gif ) !important;
}

.text-underline {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_underline.gif ) !important;
}

.text-h1 {
background-image: url( http://www.gwt-ext.com/demo/images/silk/text_heading_1.gif ) !important;
}

/*live search*/
.search-item {
font: normal 11px tahoma, arial, helvetica, sans-serif;
padding: 3px 10px 3px 10px;
border: 1px solid #fff;
border-bottom: 1px solid #eeeeee;
white-space: normal;
color: #555;
}

.search-item h3 {
display: block;
font: inherit;
font-weight: bold;
color: #222;
}

.search-item h3 span {
float: right;
font-weight: normal;
margin: 0 0 5px 5px;
width: 100px;
display: block;
clear: none;
}

/*progress bar*/
.status {
color: #555;
}

.x-progress-wrap.left-align .x-progress-text {
text-align: left;
}

.x-progress-wrap.custom {
height: 17px;
border: 1px solid #686868;
overflow: hidden;
padding: 0 2px;
}

.ext-ie .x-progress-wrap.custom {
height: 19px;
}

.custom .x-progress-inner {
height: 17px;
background: #fff;
}

.custom .x-progress-bar {
height: 15px;
background: transparent url( http://www.gwt-ext.com/demo/images/custom-bar.gif ) repeat-x 0 0;
border-top: 1px solid #BEBEBE;
border-bottom: 1px solid #EFEFEF;
border-right: 0;
}

/*data view*/
#images-view .x-panel-body {
background: white;
font: 11px Arial, Helvetica, sans-serif;
}

#images-view .thumb {
background: #dddddd;
padding: 3px;
}

#images-view .thumb img {
height: 90px;
width: 64px;
}

#images-view .thumb-wrap {
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}

#images-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
}

#images-view .x-view-over {
border: 1px solid #dddddd;
background: #efefef url( js/ext/resources/http://www.gwt-ext.com/demo/images/default/grid/row-over.gif ) repeat-x left top;
padding: 4px;
}

#images-view .x-view-selected {
background: #eff5fb url( http://www.gwt-ext.com/demo/images/view/selected.gif ) no-repeat right bottom;
border: 1px solid #99bbe8;
padding: 4px;
}

#images-view .x-view-selected .thumb {
background: transparent;
}

#images-view .loading-indicator {
font-size: 11px;
background-image: url( 'js/ext/resources/http://www.gwt-ext.com/demo/images/default/grid/loading.gif' );
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
margin: 10px;
}

/*showcase view*/
#showcase-view .x-panel-body {
background: white;
font: 11px Arial, Helvetica, sans-serif;
}

#showcase-view .thumb {
background: #dddddd;
padding: 3px;
}

#showcase-view .thumb img {
height: 90px;
width: 118px;
}

#showcase-view .thumb-wrap {
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}

#showcase-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
}

#showcase-view .x-view-over {
border: 1px solid #dddddd;
background: #efefef url( js/ext/resources/http://www.gwt-ext.com/demo/images/default/grid/row-over.gif ) repeat-x left top;
padding: 4px;
}

#showcase-view .x-view-selected {
background: #eff5fb url( http://www.gwt-ext.com/demo/images/view/selected.gif ) no-repeat right bottom;
border: 1px solid #99bbe8;
padding: 4px;
}

#showcase-view .x-view-selected .thumb {
background: transparent;
}

#showcase-view .loading-indicator {
font-size: 11px;
background-image: url( 'js/ext/resources/http://www.gwt-ext.com/demo/images/default/grid/loading.gif' );
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
margin: 10px;
}

/*forums remote grid*/
.x-grid3-td-topic b {
font-family: tahoma, verdana;
display: block;
}

.x-grid3-td-topic b i {
font-weight: normal;
font-style: normal;
color: #000;
}

.x-grid3-td-topic .x-grid3-cell-inner {
white-space: normal;
}

.x-grid3-td-topic a {
color: #385F95;
text-decoration: none;
}

.x-grid3-td-topic a:hover {
text-decoration: underline;
}

.details .x-btn-text {
background-image: url( http://www.gwt-ext.com/demo/images/details.gif );
}

/*chooser */
.details .x-panel-body {
padding: 10px;
text-align: center;
}

.details img {
padding: 10px;
height: 90px;
width: 64px;
}

.details-info {
border-top: 1px solid #cccccc;
font: 11px Arial, Helvetica, sans-serif;
margin-top: 5px;
padding-top: 5px;
text-align: left;
}

.details-info b {
color: #555555;
display: block;
margin-bottom: 4px;
}

.details-info span {
display: block;
margin-bottom: 5px;
margin-left: 5px;
}

.ychooser-dlg select {
font-size: 12px;
}

#ychooser-view .x-panel-body {
background: white none repeat scroll 0%;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
}

#ychooser-view .thumb {
background: #dddddd;
padding: 3px;
}

#ychooser-view .thumb img {
height: 90px;
width: 64px;
}

#ychooser-view .thumb-wrap {
float: left;
margin: 4px;
margin-right: 0;
padding: 5px;
}

#ychooser-view .thumb-wrap span {
display: block;
overflow: hidden;
text-align: center;
}

#ychooser-view .x-view-selected {
background: #c3daf9;
border: 2px solid #6593cf;
padding: 3px;
}

#ychooser-view .x-view-selected .thumb {
background: transparent;
}

#ychooser-view .loading-indicator {
font-size: 11px;
background-image: url( '../../ext/resources/http://www.gwt-ext.com/demo/images/default/grid/loading.gif' );
background-repeat: no-repeat;
background-position: left;
padding-left: 20px;
margin: 10px;
}

#ychooser-view .x-view-over {
border: 1px solid #dddddd;
background: #efefef url( ../../resources/http://www.gwt-ext.com/demo/images/default/grid/row-over.gif ) repeat-x left top;
padding: 4px;
}

/*toolbar and menus*/
.bmenu {
background-image: url( http://www.gwt-ext.com/demo/images/menu-show.gif ) !important;
}

/*message box*/
.x-window-dlg .ext-mb-download {
background: transparent url( http://www.gwt-ext.com/demo/images/download.gif ) no-repeat top left !important;
height: 36px;
}

/*simple form */
.simple-form-label {
padding: 5px;
background-color: #CDEB8B;
margin-bottom: 15px;
border: #666666;
}

/*outlook icons*/

.inbox-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_table.gif ) !important;
}

.drafts-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_edit.gif ) !important;
}

.sent-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_go.gif ) !important;
}

.folders-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/folder_database.gif ) !important;
}

.trash-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/basket_delete.gif ) !important;
}

.chat-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/comment.gif ) !important;
}

.spam-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/basket_delete.gif ) !important;
}

.email-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/email.gif ) !important;
}

/* remove the default left,center and right images from the button border*/
.mybutton-text-icon .x-btn-left, .mybutton-text-icon .x-btn-right, .mybutton-text-icon .x-btn-center {
background: 0;
}

/* customize the new button	that has a caption below the icon */
.mybutton-text-icon .x-btn-center .x-btn-text {
background-position: 0 2px;
background-repeat: no-repeat;
padding-left: 0px;
padding-top: 32px;
padding-bottom: 0px;
padding-right: 0px;
height: 32px;
width: 32px;
}

#toc-grid .x-grid3-cell-inner {
overflow: visible; white-space: normal !important;
}

.bug-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/bug.gif) !important;
}

.map-icon {
background-image: url( http://www.gwt-ext.com/demo/images/silk/map.gif ) !important;
}

皮肤：xtheme-silverCherry 可以网上找到

JSON格式：

[{id:1,text:'商家管理',leaf:true,iconCls:'combination-category-icon',href:''},
{id:3,text:'线路管理',leaf:true,iconCls:'map-icon',href:''},
{id:4,text:'游记管理',leaf:true,iconCls:'credits-icon',href:''},
{id:2,text:'站点管理',leaf:true,iconCls:'misc-category-icon',href:''},
{id:5,text:'管理员管理',leaf:true,iconCls:'user-icon',href:''}]

数据库：

1 id int 4 0
0 emmName nvarchar 20 1
0 emmFather int 4 1
0 emmOrder int 4 1
0 emmIconCls nvarchar 50 1
0 emmHref nvarchar 200 1