html与ext布局,Ext.js简单布局加静态树示例

Ajax

function exitLogin()

{

Ext.MessageBox.confirm("提示","是否要退出？",function(status){

if('yes'==status)

{

location.href="http://www.oschina.net";

//location.replace("http://www.baidu.com");

}

});

}

Ext.onReady(function(){

var toolbar = new Ext.toolbar.Toolbar({

//renderTo:'toolbar',

autoWidth:true,

frame:true,

});

toolbar.add([{

xtype:'tbspacer',width:30

},{

text:'系统管理', iconCls:'1.gif',handler:function(){

toolbar.enable();

}

},'-',{

text:'系统帮助', icon:'1.gif',handler:function(){

toolbar.enable();

}

},{

text:'不知道了', iconCls:'1.gif',handler:function(){

toolbar.disable();

}

},{

xtype:'textfield',

label:'我的Label',

hideLabel:true,

width:150

},'->',

'管理员  您好，欢迎登陆!!!',

,{

xtype:'tbspacer',width:10

},{

label:'系统退出',

icon:'close.gif',handler:exitLogin

},{

xtype:'tbspacer',width:50

}]);

var pnNorth=new Ext.Panel({

id:'pnNorth',

autoWidth:true,

heigth:100,

frame:true,

//split:true,//显示分隔条

region:'north',

bbar: toolbar,

html:'

XXXXXXXXX平台

'

});

var pnBottom = new Ext.Panel({

id:'pnBottom',

height:25,

autoWidth:true,

split:true,//显示分隔条

frame:true,

region:'south',

//html:'

Power By: XXXXXXXXXX平台 

版权所有：Rayn

'

//html:''

html:'

Power By: XXXXXXXX平台        版权所有：Rayn  E-mail: liuwei412552703@163.com

'

});

var tree = Ext.create('Ext.tree.Panel', {

title: '人员用户管理',

icon:'1.gif',

dockedItems: [{

xtype: 'toolbar' ,

items: [

{ xtype: 'button', text: '修改' },

{ xtype: 'button', text: '更新' },

{ xtype: 'button', text: '确定' }

]

}],

fbar: [

{ type: 'button', text: '你要弄啥？' }

],

lbar: [{ xtype: 'button', text: '靠侧栏按钮' }],

root:{

text: '人员用户管理',

expanded: true,

icon:'1.gif',

scope:this,

children: [{

id:'r1',

text: '管理员',

icon:'1.gif',

url:'http://www.oschina.net',

leaf: true

}, {

text: '系统用户',

icon:'1.gif',

id:'r2',

url:'http://www.baidu.com',

leaf: true

}, {

text: '角色管理',

children: [{

id:'r3',

text: '研发部门',

leaf: true

},{

id:'r4',

text: '测试部门',

leaf: true

},{

id:'r5',

text: '销售部门',

leaf: true

},{

text: '运行保障部门',

leaf: true

}]

},{

text:'用户日志管理',

iconCls:'',

children:[{

text:'操作日志',

leaf:true

},{

text:'操作日志',

leaf:true

},{

text:'操作日志',

leaf:true

}]

}]

}

});

tree.addListener('itemclick',function (view, record, item, index, e){

//alert(record.raw.url + "------" + record.raw.id + "------" + record.raw.leaf);

var url = 'http://www.baidu.com';

if(record.raw.leaf){

e.stopEvent();

var n = pnCenter.getComponent(item.id + 1);

if(!n) {

n = pnCenter.add({

id:item.id + 1,//item.id + 1, //pnCenter.items.length + 1,

title: record.raw.text,

closable:true,

loadMask:true,

icon:record.raw.icon,

autoWidth:true,

autoHeight:true,

html:''

}).show();

}

pnCenter.setActiveTab(n);

}

});

//设置树的点击事件

function treeClick(node,e) {

if(node.isLeaf()){

e.stopEvent();

var n = pnCenter.getComponent(node.id);

if (!n) {

var n = pnCenter.add({

'id' : node.id,

'title' : node.text,

closable:true,

html : '我是"'+node.text+'"'

});

}

pnCenter.setActiveTab(n);

}

}

var a = Ext.create('Ext.panel.Panel',{

id:'a',

title:'菜单管理',

icon:'1.gif',

width:'190',

split: true,

minWidth: 130,

align:'center',

collapsible: true,

floatable: false,

layout: 'accordion',

animCollapse: true,

items:[{

title: 'Sencha Blog',

image:'1.gif',

url: 'http://feeds.feedburner.com/extblog'

},{

title: 'Sencha Blog',

url: 'http://feeds.feedburner.com/extblog'

},{

title: 'Sencha Blog',

url: 'http://feeds.feedburner.com/extblog'

}],

listeners: {

scope: this,

'click':function(){

alert('liu');

}

}

});

var pnWest=new Ext.Panel({

id:'pnWest',

title:'菜单项',

width:200,

margins:'0 5 0 3',

heigth:'fit',

split:true,//显示分隔条

region:'west',

layout:'accordion',

collapsible:true,

items: [

tree

,a

,{

title:'系统设置',

border:false,

icon:'1.gif',

html:'

}]

});

var pnSub1=new Ext.Panel({

height:300,

columnWidth:.3,

html:'这是子panle1'

});

var pnSub2=new Ext.Panel({

height:300,

columnWidth:.7,

html:'这是子panle2'

});

var pn=new Ext.Panel({

id:'pn',

title:'Tab标签测试拆分',

icon:'1.gif',

width:800,

layout:'column',

authHeight:true,

items:[

pnSub1,

pnSub2

]

});

var pnCenter=new Ext.TabPanel({

region:'center',

activeTab:0,

deferredRender:false,

resizeTabs:true, // turn on tab resizing

items:[{

title:'Tab标签测试1',

authHeight:true,

closable:false,//是否可关闭

html:'这里显示所收邮件。。。'

},{

title:'Tab标签测试2',

authHeight:true,

closable:true,//是否可关闭

loadMask:true,

html:''

},

pn

]

});

var vp=new Ext.Viewport({

layout:"border",

renderTo:'app-msg',

layoutConfig:{

animate:true

},

items:[

pnNorth,

pnWest,

pnCenter,

pnBottom

]

});

});

Ext.js布局加树以及TabPanel示例