extjs4-----panel的accordion佈局以及treePanel導航

如何創建一個accordion佈局的panel？

官方例子

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: 'Panel content!'
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
});

後臺獲取數據，創建導航樹，

var store = Ext.create('Ext.data.TreeStore', {
		//The store will automatically create a Ext.data.Model with these fields
		//For anything more complicated, such as specifying a particular id property or associations,
		//a Ext.data.Model should be defined and specified for the model config.
		fields:['text','leaf','url'], 
		proxy : {
			type:'ajax',  
        	//url:'http://localhost:8080/testextjs/servlet/treeServlet',  
			url:url,
        	reader:{  
            	type:'json',  
            	root:'trees'  
        	}
		},
	    
	    autoLoad:true
	});
	
	var treepanel = Ext.create('Ext.tree.Panel', {
		title: 'Panel 1',
	    store: store,
	    rootVisible: false,
	   	listeners: {
	   		itemclick:function(tree,record,item,index,e,options) {
	   			if (record.get('leaf')) {
	   				var url = record.get('url');
	   				Ext.getCmp('centerFrame').body.update("<iframe src='"+url+"' width='100%' height='100%' frameborder='0'></iframe>");
	   			}
	   			
	   		}
	   	}
             
	});

後臺傳過來的數據格式，注意上邊的fields，仔細看一下注釋（註釋爲官方註釋）

StringBuilder sbStr = new StringBuilder();
		sbStr.append("{trees:[");
		sbStr.append("{text: '個人生活', leaf: true, url:'pages/txl/txl.jsp'},");
		sbStr.append("{text: '相片管理', leaf: true, url:'pages/txl/txl.jsp'},");
		sbStr.append("{text: '生活管理', leaf: true, url:'pages/txl/txl.jsp'}");
		sbStr.append("]}");

顯示效果如下：

示例鏈接：http://download.csdn.net/detail/scqdscy1994/9698134