面板控件panel应用 new Ext.Panel({ title:'面板头部(header)', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工具栏(bottom toolbars)'], height:200, width:300, frame:true, applyTo :'panel', bodyStyle:'background-color:#FFFFFF', html:'<div>面板体(body)</div>', tools : [ {id:'toggle'}, {id:'close'}, {id:'maximize'} ], buttons:[ new Ext.Button({ text:'面板底部(footer)' }) ] }) 面板panel加载远程页面 var panel = new Ext.Panel({ title:'面板加载远程页面', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 autoScroll : true,//自动显示滚动条 collapsible : true,//允许展开和收缩 applyTo :'panel', autoLoad :'page1.html',//自动加载面板体的默认连接 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }) 面板panel加载本地页面 var panel = new Ext.Panel({ title:'面板加载本地资源', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 collapsible : true,//允许展开和收缩 autoScroll : true,//自动显示滚动条 autoHeight : false,//使用固定高度 //autoHeight : true,//使用自动高度 applyTo :'panel', contentEl :'localElement',//加载本地资源 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色 }) 本地资源 <table border=1 id='localElement'> <tr><th colspan=2>本地资源---员工列表</th></tr> <tr> <th width = 60>序号</th><th width = 80>姓名</th> <tr> <tr><td>1</td><td>张三</td></tr> <tr><td>2</td><td>李四</td></tr> <tr><td>3</td><td>王五</td></tr> <tr><td>4</td><td>赵六</td></tr> <tr><td>5</td><td>陈七</td></tr> <tr><td>6</td><td>杨八</td></tr> <tr><td>7</td><td>刘九</td></tr> </table> 使用html配置项定义面板panel内容 var htmlArray = [ '<table border=1>', '<tr><td colspan=2>员工列表</td></tr>', '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>', '<tr><td>1</td><td>张三</td></tr>', '<tr><td>2</td><td>李四</td></tr>', '<tr><td>3</td><td>王五</td></tr>', '<tr><td>4</td><td>赵六</td></tr>', '<tr><td>5</td><td>陈七</td></tr>', '<tr><td>6</td><td>杨八</td></tr>', '<tr><td>7</td><td>刘九</td></tr>', '</table>' ]; var panel = new Ext.Panel({ title:'使用html配置项自定义面板内容', height:150,//设置面板的高度 width:250,//设置面板的宽度 frame:true,//渲染面板 colla