`
zengshaotao
  • 浏览: 787576 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

extjs4面板

 
阅读更多

标准面板： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'面板头部（header）',  
  3.             tbar : ['顶端工具栏(top toolbars)'],  
  4.             bbar : ['底端工具栏(bottom toolbars)'],  
  5.             height:200,  
  6.             collapsible : true,  
  7.             collapseDirection : 'left',  
  8.             width:300,  
  9.             frame:true,  
  10.             renderTo: Ext.getBody(),  
  11.             bodyPadding: 5,  
  12.             bodyStyle:'background-color:#FFFFFF',  
  13.             html:'面板体（body）',  
  14.             tools : [  
  15.                 {id:'toggle'},  
  16.                 {id:'close'},  
  17.                 {id:'maximize'}  
  18.             ],  
  19.             buttons:[{  
  20.                 text:'面板底部（footer）'  
  21.             }]  
  22.         });  


面板加载远程页面： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'面板加载远程页面',  
  3.             height:150,//设置面板的高度  
  4.             width:250,//设置面板的宽度  
  5.             frame:true,//渲染面板  
  6.             autoScroll : true,//自动显示滚动条  
  7.             collapsible : true,//允许展开和收缩  
  8.             renderTo: Ext.getBody(),  
  9.             bodyPadding: 5,  
  10.             autoLoad :'page1.html',//自动加载面板体的默认连接  
  11.             bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
  12.         });  


面板加载本地资源： 

Html代码  收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>面板加载本地资源</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.create('Ext.panel.Panel',{  
  11.             title:'面板加载本地资源',  
  12.             height:150,//设置面板的高度  
  13.             width:250,//设置面板的宽度  
  14.             frame:true,//渲染面板  
  15.             collapsible : true,//允许展开和收缩  
  16.             autoScroll : true,//自动显示滚动条  
  17.             renderTo: Ext.getBody(),  
  18.             bodyPadding: 5,  
  19.             contentEl :'localElement',//加载本地资源  
  20.             bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
  21.         });  
  22.     });  
  23.   </script>  
  24.  </HEAD>  
  25.  <BODY STYLE="margin: 10px">  
  26.     <table border=1 id='localElement'>  
  27.         <tr><th colspan=2>本地资源---员工列表</th></tr>  
  28.         <tr>  
  29.             <th width = 60>序号</th><th width = 80>姓名</th>  
  30.         <tr>  
  31.         <tr><td>1</td><td>张三</td></tr>  
  32.         <tr><td>2</td><td>李四</td></tr>  
  33.         <tr><td>3</td><td>王五</td></tr>  
  34.         <tr><td>4</td><td>赵六</td></tr>  
  35.         <tr><td>5</td><td>陈七</td></tr>  
  36.         <tr><td>6</td><td>杨八</td></tr>  
  37.         <tr><td>7</td><td>刘九</td></tr>  
  38.     </table>  
  39.  </BODY>  
  40. </HTML>  


使用html配置项自定义面板内容： 

Javascript代码  收藏代码
  1. var htmlArray = [  
  2.             '<table border=1>',  
  3.                 '<tr><td colspan=2>员工列表</td></tr>',  
  4.                 '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',  
  5.                 '<tr><td>1</td><td>张三</td></tr>',  
  6.                 '<tr><td>2</td><td>李四</td></tr>',  
  7.                 '<tr><td>3</td><td>王五</td></tr>',  
  8.                 '<tr><td>4</td><td>赵六</td></tr>',  
  9.                 '<tr><td>5</td><td>陈七</td></tr>',  
  10.                 '<tr><td>6</td><td>杨八</td></tr>',  
  11.                 '<tr><td>7</td><td>刘九</td></tr>',  
  12.             '</table>'  
  13.           ];  
  14.         Ext.create('Ext.panel.Panel',{  
  15.             title:'使用html配置项自定义面板内容',  
  16.             height:150,//设置面板的高度  
  17.             width:250,//设置面板的宽度  
  18.             frame:true,//渲染面板  
  19.             collapsible : true,//允许展开和收缩  
  20.             autoScroll : true,//自动显示滚动条  
  21.             renderTo: Ext.getBody(),  
  22.             bodyPadding: 5,  
  23.             html:htmlArray.join(''),  
  24.             bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
  25.         });  


使用items配置项添加单一组件示例： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'日历',  
  3.             frame:true,//渲染面板  
  4.             collapsible : true,//允许展开和收缩  
  5.             renderTo: Ext.getBody(),  
  6.             width : 200,  
  7.             bodyPadding: 5,  
  8.             items: [{//向面板中添加一个日期组件  
  9.                 xtype: 'datepicker',  
  10.                 minDate: new Date()  
  11.             }]  
  12.         });  


使用items配置项添加多个组件示例： 

Html代码  收藏代码
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>使用items配置项添加多个组件示例</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.create('Ext.panel.Panel',{  
  11.             title:'使用items进行面板嵌套',  
  12.             frame:true,//渲染面板  
  13.             collapsible : true,//允许展开和收缩  
  14.             height : 200,  
  15.             width : 250,  
  16.             renderTo: Ext.getBody(),  
  17.             bodyPadding: 5,  
  18.             layout : 'vbox',  
  19.             defaults : {//设置默认属性  
  20.                 bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色  
  21.                 collapsible : true,//允许展开和收缩  
  22.                 width : 230,  
  23.                 autoScroll : true//自动显示滚动条  
  24.             },  
  25.             items: [{  
  26.                 title : '嵌套面板一',  
  27.                 height : 80,//子面板高度为80  
  28.                 contentEl : 'localElement'//加载本地资源  
  29.             },{  
  30.                 title : '嵌套面板二',  
  31.                 autoLoad : 'page1.html'//加载远程页面  
  32.             }]  
  33.         });  
  34.     });  
  35.   </script>  
  36.  </HEAD>  
  37.  <BODY STYLE="margin: 10px">  
  38.     <table border=1 id='localElement'>  
  39.         <tr><th colspan=2>本地资源---员工列表</th></tr>  
  40.         <tr>  
  41.             <th width = 60>序号</th><th width = 80>姓名</th>  
  42.         <tr>  
  43.         <tr><td>1</td><td>张三</td></tr>  
  44.         <tr><td>2</td><td>李四</td></tr>  
  45.         <tr><td>3</td><td>王五</td></tr>  
  46.     </table>  
  47.  </BODY>  
  48. </HTML>  


Ext.layout.container.Auto布局示例： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Auto布局示例',  
  3.             frame:true,//渲染面板  
  4.             width : 250,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             layout : 'auto',//自动布局  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
  10.             },  
  11.             //面板items配置项默认的xtype类型为panel，  
  12.             //该默认值可以通过defaultType配置项进行更改  
  13.             items: [{  
  14.                 title : '嵌套面板一',  
  15.                 html : '面板一'  
  16.             },{  
  17.                 title : '嵌套面板二',  
  18.                 html : '面板二'  
  19.             }]  
  20.         });  


Ext.layout.container.Fit布局示例： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'fit',  
  3.             title:'Ext.layout.container.Fit布局示例',  
  4.             frame:true,//渲染面板  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
  10.             },  
  11.             //面板items配置项默认的xtype类型为panel，  
  12.             //该默认值可以通过defaultType配置项进行更改  
  13.             items: [{  
  14.                 title : '嵌套面板一',  
  15.                 html : '面板一'  
  16.             },{  
  17.                 title : '嵌套面板二',  
  18.                 html : '面板二'  
  19.             }]  
  20.         })  


Ext.layout.container.Accordion布局示例： 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout:'accordion',  
  3.             title:'Ext.layout.container.Accordion布局示例',  
  4.             frame:true,//渲染面板  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             bodyPadding: 5,  
  9.             defaults : {//设置默认属性  
  10.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  11.             },  
  12.             items: [{  
  13.                 title : '嵌套面板一',  
  14.                 html : '说明一'  
  15.             },{  
  16.                 title : '嵌套面板二',  
  17.                 html : '说明二'  
  18.             },{  
  19.                 title : '嵌套面板三',  
  20.                 html : '说明三'  
  21.             }]  
  22.         });  


Ext.layout.CardLayout布局示例: 

Javascript代码  收藏代码
  1. var panel = Ext.create('Ext.panel.Panel',{  
  2.             layout : 'card',  
  3.             activeItem : 0,//设置默认显示第一个子面板  
  4.             title:'Ext.layout.container.Card布局示例',  
  5.             frame:true,//渲染面板  
  6.             height : 150,  
  7.             width : 250,  
  8.             renderTo: Ext.getBody(),  
  9.             bodyPadding: 5,  
  10.             defaults : {//设置默认属性  
  11.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  12.             },  
  13.             items: [{  
  14.                 title : '嵌套面板一',  
  15.                 html : '说明一',  
  16.                 id : 'p1'  
  17.             },{  
  18.                 title : '嵌套面板二',  
  19.                 html : '说明二',  
  20.                 id : 'p2'  
  21.             },{  
  22.                 title : '嵌套面板三',  
  23.                 html : '说明三',  
  24.                 id : 'p3'  
  25.             }],  
  26.             buttons:[{  
  27.                 text : '上一页',  
  28.                 handler : changePage  
  29.             },{  
  30.                 text : '下一页',  
  31.                 handler : changePage  
  32.             }]  
  33.         });  
  34.         //切换子面板  
  35.         function changePage(btn){  
  36.             var index = Number(panel.layout.activeItem.id.substring(1));  
  37.             if(btn.text == '上一页'){  
  38.                 index -= 1;  
  39.                 if(index < 1){  
  40.                     index = 1;  
  41.                 }  
  42.             }else{  
  43.                 index += 1;  
  44.                 if(index > 3){  
  45.                     index = 3;  
  46.                 }  
  47.             }  
  48.             panel.layout.setActiveItem('p'+index);  
  49.         }  


百分比（Percentage）定位示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             frame:false,//渲染面板  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  10.             },  
  11.             items: [{  
  12.                 anchor : '50% 50%',//设置子面板的宽高为父面板的50%  
  13.                 title : '子面板'  
  14.             }]  
  15.         });  


偏移值（Offsets）定位: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             frame:false,//渲染面板  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  10.             },  
  11.             items: [{  
  12.                 anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素  
  13.                 title : '子面板'  
  14.             }]  
  15.         });  


参考边（Sides）定位: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             autoScroll : true,//自动显示滚动条  
  5.             frame:false,//渲染面板  
  6.             height : 150,  
  7.             width : 300,  
  8.             renderTo: Ext.getBody(),  
  9.             defaults : {//设置默认属性  
  10.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  11.             },  
  12.             items: [{  
  13.                 anchor : 'r b',//相对于父容器的右边和底边的差值进行定位  
  14.                 width : 200,  
  15.                 height : 100,  
  16.                 title : '子面板'  
  17.             }]  
  18.         });  


Ext.layout.container.Absolute布局示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'absolute',  
  3.             title:'Ext.layout.container.Absolute布局示例',  
  4.             frame:false,//渲染面板  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 frame : true,  
  10.                 height : 70,  
  11.                 width : 100,  
  12.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
  13.             },  
  14.             items: [{  
  15.                 x : 10,//横坐标为距父容器左边缘90像素的位置  
  16.                 y : 10,//纵坐标为距父容器上边缘10像素的位置  
  17.                 html : '子面板一',  
  18.                 title : '子面板一'  
  19.             },{  
  20.                 x : 130,//横坐标为距父容器左边缘130像素的位置  
  21.                 y : 40,//纵坐标为距父容器上边缘40像素的位置  
  22.                 html : '子面板二',  
  23.                 title : '子面板二'  
  24.             }]  
  25.         });  


指定固定列宽示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面板  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面板一',  
  15.                 width:100//指定列宽为100像素  
  16.             },{  
  17.                 title:'子面板二',  
  18.                 width:100//指定列宽为100像素  
  19.             }]  
  20.         });  


使用百分比指定列宽: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面板  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面板一',  
  15.                 columnWidth:.3//指定列宽为容器宽度的30%  
  16.                   
  17.             },{  
  18.                 title:'子面板二',  
  19.                 columnWidth:.7//指定列宽为容器宽度的70%  
  20.             }]  
  21.         });  


固定值与百分比结合使用: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面板  
  5.             height : 150,  
  6.             width : 350,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面板一',  
  15.                 width : 100//指定列宽为100像素  
  16.             },{  
  17.                 title:'子面板二',  
  18.                 columnWidth:.3//指定列宽为容器剩余宽度的30%  
  19.             },{  
  20.                 title:'子面板三',  
  21.                 columnWidth:.7//指定列宽为容器剩余宽度的70%  
  22.             }]  
  23.         });  


Ext.layout.container.Table布局示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Table布局示例',  
  3.             layout : {  
  4.                 type : 'table',//表格布局  
  5.                 columns : 4 //设置表格布局默认列数为4列  
  6.             },  
  7.             frame:true,//渲染面板  
  8.             height : 150,  
  9.             width : 210,  
  10.             renderTo: Ext.getBody(),  
  11.             defaults : {//设置默认属性  
  12.                 bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
  13.                 frame : true,  
  14.                 width : 50,  
  15.                 height : 50  
  16.             },  
  17.             items: [{  
  18.                 title:'子面板一',  
  19.                 width : 150,  
  20.                 colspan : 3//设置跨列  
  21.             },{  
  22.                 title:'子面板二',  
  23.                 rowspan : 2,//设置跨行  
  24.                 height : 100  
  25.             },  
  26.             {title:'子面板三'},  
  27.             {title:'子面板四'},  
  28.             {title:'子面板五'}]  
  29.         });  


Ext.layout.container.Border布局示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title : 'Ext.layout.container.Border布局示例',  
  3.             layout:'border',//边框布局  
  4.             height : 250,  
  5.             width : 400,  
  6.             frame : true,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//设置默认属性  
  9.                 collapsible : true  
  10.             },  
  11.             items: [{  
  12.                 title: 'north Panel',  
  13.                 html : '上边',  
  14.                 region: 'north',//指定子面板所在区域为north  
  15.                 height: 50  
  16.             },{  
  17.                 title: 'South Panel',  
  18.                 html : '下边',  
  19.                 region: 'south',//指定子面板所在区域为south  
  20.                 height: 50  
  21.             },{  
  22.                 title: 'West Panel',  
  23.                 html : '左边',  
  24.                 region:'west',//指定子面板所在区域为west  
  25.                 width: 100  
  26.             },{  
  27.                 title: 'east Panel',  
  28.                 frameHeader : true,  
  29.                 frame : false,  
  30.                 html : '右边',  
  31.                 region:'east',//指定子面板所在区域为east  
  32.                 width: 100  
  33.             },{  
  34.                 title: 'Main Content',  
  35.                 html : '中间',  
  36.                 region:'center'//指定子面板所在区域为center  
  37.             }]  
  38.         });  


Ext.layout.container.HBox布局示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.panel.Panel',{  
  2.             title : 'Ext.layout.container.HBox布局示例',  
  3.             layout:{  
  4.                 type : 'hbox',//水平盒布局  
  5.                 align : 'stretch'//子面板高度充满父容器  
  6.             },  
  7.             height : 150,  
  8.             width : 300,  
  9.             frame : true,  
  10.             renderTo: Ext.getBody(),  
  11.             items: [{  
  12.                 title: '子面板一',  
  13.                 flex : 1,  
  14.                 html : '1/4宽(flex=1)'  
  15.             },{  
  16.                 title: '子面板二',  
  17.                 flex : 1,  
  18.                 html : '1/4宽(flex=1)'  
  19.             },{  
  20.                 title: '子面板三',  
  21.                 flex : 2,  
  22.                 html : '1/2宽(flex=2)'  
  23.             }]  
  24.         });  


Ext.container.Viewport示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.container.Viewport',{  
  2.             layout:'border',//表格布局  
  3.             items: [{  
  4.                 title: 'north Panel',  
  5.                 html : '上边',  
  6.                 region: 'north',//指定子面板所在区域为north  
  7.                 height: 100  
  8.             },{  
  9.                 title: 'West Panel',  
  10.                 html : '左边',  
  11.                 region:'west',//指定子面板所在区域为west  
  12.                 width: 150  
  13.             },{  
  14.                 title: 'Main Content',  
  15.                 html : '中间',  
  16.                 region:'center'//指定子面板所在区域为center  
  17.             }]  
  18.         });  


Ext.tab.Panel示例: 

Javascript代码  收藏代码
  1. Ext.create('Ext.tab.Panel',{  
  2.             title : 'Ext.tab.Panel示例',  
  3.             frame : true,  
  4.             height : 150,  
  5.             width : 300,  
  6.             activeTab : 1,//默认激活第一个tab页  
  7.             renderTo: Ext.getBody(),  
  8.             items: [  
  9.                 {title: 'tab标签页1',html : 'tab标签页1内容'},  
  10.                 {title: 'tab标签页2',html : 'tab标签页2内容'},  
  11.                 {title: 'tab标签页3',html : 'tab标签页3内容'},  
  12.                 {title: 'tab标签页4',html : 'tab标签页4内容'},  
  13.                 {title: 'tab标签页5',html : 'tab标签页5内容'}  
  14.             ]  
  15.         });  


Ext.tab.Panel示例（动态添加tab页）: 

Javascript代码  收藏代码
  1. var tabPanel = Ext.create('Ext.tab.Panel',{  
  2.             title : 'Ext.tab.Panel示例（动态添加tab页）示例',  
  3.             frame : true,  
  4.             height : 150,  
  5.             width : 300,  
  6.             activeTab : 0,//默认激活第一个tab页  
  7.             renderTo: Ext.getBody(),  
  8.             items : [{  
  9.                 title: 'tab标签页1',  
  10.                 html : 'tab标签页1内容'  
  11.             }],  
  12.             buttons : [{  
  13.                 text : '添加标签页',  
  14.                 handler : addTabPage  
  15.             }]  
  16.         });  
  17.         function addTabPage(){  
  18.             var index = tabPanel.items.length + 1;  
  19.             var tabPage = tabPanel.add({//动态添加tab页  
  20.                 title: 'tab标签页'+index,  
  21.                 html : 'tab标签页'+index+'内容',  
  22.                 closable : true//允许关闭  
  23.             })  
  24.             tabPanel.setActiveTab(tabPage);//设置当前tab页  
  25.         }  
分享到：
| extjs4后台取数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4的demo

    将这两个文件放在正确的位置，然后在浏览器中访问`http://localhost:8080/Ext4/helloworld.html`，你将看到一个带有标题"Hello Ext"的面板，显示文本"Hello! Welcome to Ext JS."。 在ExtJS中，`Ext.onReady`和`Ext...

    Extjs面板和布局

    ### Extjs面板和布局知识点详解 #### 一、Extjs中的面板（Panel） 在Extjs中，**面板（Panel）**扮演着极其重要的角色，它不仅作为其他组件的容器，而且还是实现页面布局的关键手段之一。面板类似于Delphi、Visual...

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架，专门用于构建富互联网应用（RIA）。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    ExtJS4多文件上传，带进度条及管理

    1. **创建uploadPanel**：在ExtJS4中定义一个面板，包含文件选择输入框、上传按钮和其他控件。 2. **集成swfupload**：引入swfupload库，配置相关参数，如文件类型、最大上传大小等。 3. **事件监听**：设置事件监听...

    Extjs经典的教程之面板布局

    Extjs经典教程，关于面板布局的学习资料，图文并茂，值得一看

    ExtJS4之初体验

    ### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前，我们需要做一些基础的准备工作，确保开发环境已经搭建好，并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...

    Extjs4 图片浏览器

    ExtJS4图片浏览器是一款基于ExtJS4框架开发的用于展示和浏览图片的应用程序。ExtJS是一个强大的JavaScript库，专门用于构建富客户端Web应用程序。这款图片浏览器利用了ExtJS4的组件化、数据绑定和事件处理等特性，为...

    EXTJS面板及布局类(DOC)

    这些概念的引入在很大程度上改变了传统的Web开发方式，在第3章和第4章中主要学习了ExtJS支持的各种组件，本章将进一步学习ExtJS的面板（panel）及布局类。 　面板（panel）是ExtJS中一个很重要的概念，它相当于一幅...

    Extjs4详解.pdf

    其4版本（Extjs4）在2012年发布，引入了许多新的功能和改进。本文将详细介绍Extjs4中三种主要的布局方式：Fit布局、Border布局和Accordion布局。 Fit布局是Extjs4中提供的简单布局之一。当一个容器采用Fit布局时，...

    extjs4官方示例以及api文档html版

    这些示例涵盖了EXTJS4的各种组件和功能，包括表格（Grid）、面板（Panel）、表单（Form）、菜单（Menu）、工具栏（Toolbar）、树形视图（Tree）、图表（Charts）等。通过运行示例，你可以直观地看到组件的外观和交互...

    extjs4环境搭建

    本文将详细介绍如何搭建ExtJS4的开发环境。 首先，你需要下载ExtJS4的版本。ExtJS4.x的发布包含了多个版本，例如4.0、4.1、4.2等，根据项目需求选择适合的版本进行下载。下载完成后，解压缩文件到本地文件系统中。 ...

    EXTJS4开发的图片文章管理项目实例

    在这个项目中，EXTJS4被用来设计和实现用户界面，包括表格、表单、面板、树形视图等元素，以展示和编辑文章和图片信息。EXTJS4的MVC架构使得代码组织清晰，便于维护和扩展。 JAVA作为后端语言，通常与EXTJS4结合...

    ExtJS4 doc文档

    ExtJS4是一款强大的JavaScript库，专门用于构建富客户端应用程序。这个文档集合包含了关于ExtJS4的详尽资料，是开发者学习和深入理解该框架的重要资源。文档覆盖了多个关键组件和概念，包括"data"（数据管理）、...

    EXTJS4 菜单栏

    3. **附加到组件**：EXTJS4允许将菜单栏附加到窗口、面板或其他组件上。例如，你可以将菜单栏添加到工具栏中，或者将其作为窗口的顶级元素。 ```javascript var toolbar = new Ext.toolbar.Toolbar({ dock: 'top',...

    extjs4 treeGrid实例

    ExtJS4是一款强大的JavaScript库，专门用于构建富客户端应用程序。TreeGrid是ExtJS中的一个组件，结合了树形视图和表格的优点，可以用来展示层次结构的数据并支持数据的排序、筛选和操作。在本实例中，我们关注的是...

    extjs4mvc的crud

    ExtJS 4 MVC 是一种基于 Sencha ExtJS 框架的前端开发模式，用于构建交互性强、功能丰富的Web应用程序。在"extjs4mvc的crud"这个主题中，我们将深入探讨如何使用ExtJS 4的Model-View-Controller（MVC）架构来实现...

    extjs4Mvc事例

    ExtJS 4 MVC是一个强大的JavaScript框架，用于构建富客户端应用程序。这个"extjs4Mvc"事例提供了关于如何在ExtJS 4中有效地利用MVC（Model-View-Controller）设计模式的详细教程。MVC模式是软件工程中常用的设计模式...

    Extjs4使用要点个人整理

    1. **控件属性**：在`Extjs 控件属性.doc`中，可能会涵盖ExtJS 4中的各种组件（如窗口、面板、表格等）的常用属性。这些属性用于定义组件的行为、外观和交互方式。例如，宽度（width）、高度（height）、标题（title...

    Extjs4后台框架

    首先，ExtJS4提供了丰富的组件库，包括表格、面板、菜单、窗口、表单等，这些组件可以帮助开发者快速创建用户界面。它的MVC（模型-视图-控制器）架构使得代码组织更加清晰，提高了代码的可维护性和复用性。在MVC模式...

    ssh+extjs4整合开发

    在IT行业中，SSH+EXTJS4的整合开发是一种常见的前端与后端技术栈结合，用于构建功能丰富的Web应用程序。SSH代表Spring、Struts和Hibernate，它们分别是Java领域中用于处理不同层面的三个核心框架：Spring提供了依赖...

Magicbox
Global site tag (gtag.js) - Google Analytics