extjs4-----panel的accordion布局以及treePanel导航

最新推荐文章于 2021-11-09 17:56:04 发布

sdqdscy1994

最新推荐文章于 2021-11-09 17:56:04 发布

阅读量1.8k

点赞数 1

分类专栏： web前台技术

本文链接：https://blog.youkuaiyun.com/scqdscy1994/article/details/53410247

版权

web前台技术专栏收录该内容

5 篇文章

订阅专栏

如何创建一个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("]}");

显示效果如下：