zoukankan      html  css  js  c++  java

  • extjs4 标准面板

    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.             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.         });  
    Ext.create('Ext.panel.Panel',{
			title:'面板头部（header）',
			tbar : ['顶端工具栏(top toolbars)'],
			bbar : ['底端工具栏(bottom toolbars)'],
			height:200,
			collapsible : true,
			collapseDirection : 'left',
			300,
			frame:true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			bodyStyle:'background-color:#FFFFFF',
			html:'面板体（body）',
			tools : [
				{id:'toggle'},
				{id:'close'},
				{id:'maximize'}
			],
			buttons:[{
				text:'面板底部（footer）'
			}]
		});


    面板加载远程页面：

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


    面板加载本地资源：

    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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/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.             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>
 <HEAD>
  <TITLE>面板加载本地资源</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.create('Ext.panel.Panel',{
			title:'面板加载本地资源',
			height:150,//设置面板的高度
			250,//设置面板的宽度
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			autoScroll : true,//自动显示滚动条
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			contentEl :'localElement',//加载本地资源
			bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
	<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>
 </BODY>
</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.             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.         });  
    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>'
		  ];
		Ext.create('Ext.panel.Panel',{
			title:'使用html配置项自定义面板内容',
			height:150,//设置面板的高度
			250,//设置面板的宽度
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			autoScroll : true,//自动显示滚动条
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			html:htmlArray.join(''),
			bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
		});


    使用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.         });  
    Ext.create('Ext.panel.Panel',{
			title:'日历',
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			renderTo: Ext.getBody(),
			width : 200,
			bodyPadding: 5,
		    items: [{//向面板中添加一个日期组件
		        xtype: 'datepicker',
		        minDate: new Date()
		    }]
		});


    使用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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/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>  
    <HTML>
 <HEAD>
  <TITLE>使用items配置项添加多个组件示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.create('Ext.panel.Panel',{
			title:'使用items进行面板嵌套',
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			height : 200,
			width : 250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			layout : 'vbox',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色
				collapsible : true,//允许展开和收缩
				width : 230,
				autoScroll : true//自动显示滚动条
			},
			items: [{
				title : '嵌套面板一',
				height : 80,//子面板高度为80
				contentEl : 'localElement'//加载本地资源
			},{
				title : '嵌套面板二',
				autoLoad : 'page1.html'//加载远程页面
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
	<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>
	</table>
 </BODY>
</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.create('Ext.panel.Panel',{
			title:'Ext.layout.container.Auto布局示例',
			frame:true,//渲染面板
			width : 250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			layout : 'auto',//自动布局
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
			},
			//面板items配置项默认的xtype类型为panel，
			//该默认值可以通过defaultType配置项进行更改
			items: [{
				title : '嵌套面板一',
				html : '面板一'
			},{
				title : '嵌套面板二',
				html : '面板二'
			}]
		});


    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.create('Ext.panel.Panel',{
			layout : 'fit',
			title:'Ext.layout.container.Fit布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
			},
			//面板items配置项默认的xtype类型为panel，
			//该默认值可以通过defaultType配置项进行更改
			items: [{
				title : '嵌套面板一',
				html : '面板一'
			},{
				title : '嵌套面板二',
				html : '面板二'
			}]
		})


    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.create('Ext.panel.Panel',{
			layout:'accordion',
			title:'Ext.layout.container.Accordion布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				title : '嵌套面板一',
				html : '说明一'
			},{
				title : '嵌套面板二',
				html : '说明二'
			},{
				title : '嵌套面板三',
				html : '说明三'
			}]
		});


    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.         }  
    var panel = Ext.create('Ext.panel.Panel',{
			layout : 'card',
			activeItem : 0,//设置默认显示第一个子面板
			title:'Ext.layout.container.Card布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				title : '嵌套面板一',
				html : '说明一',
				id : 'p1'
			},{
				title : '嵌套面板二',
				html : '说明二',
				id : 'p2'
			},{
				title : '嵌套面板三',
				html : '说明三',
				id : 'p3'
			}],
			buttons:[{
				text : '上一页',
				handler : changePage
			},{
				text : '下一页',
				handler : changePage
			}]
		});
		//切换子面板
		function changePage(btn){
			var index = Number(panel.layout.activeItem.id.substring(1));
			if(btn.text == '上一页'){
				index -= 1;
				if(index < 1){
					index = 1;
				}
			}else{
				index += 1;
				if(index > 3){
					index = 3;
				}
			}
			panel.layout.setActiveItem('p'+index);
		}


    百分比（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.         });  
    Ext.create('Ext.panel.Panel',{
			layout : 'anchor',
			title:'Ext.layout.container.Anchor布局示例',
			frame:false,//渲染面板
			height : 150,
			width : 300,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				anchor : '50% 50%',//设置子面板的宽高为父面板的50%
				title : '子面板'
			}]
		});


    偏移值（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.         });  
    Ext.create('Ext.panel.Panel',{
			layout : 'anchor',
			title:'Ext.layout.container.Anchor布局示例',
			frame:false,//渲染面板
			height : 150,
			width : 300,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素
				title : '子面板'
			}]
		});


    参考边（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.create('Ext.panel.Panel',{
			layout : 'anchor',
			title:'Ext.layout.container.Anchor布局示例',
			autoScroll : true,//自动显示滚动条
			frame:false,//渲染面板
			height : 150,
			width : 300,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
				width : 200,
				height : 100,
				title : '子面板'
			}]
		});


    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.         });  
    Ext.create('Ext.panel.Panel',{
			layout : 'absolute',
			title:'Ext.layout.container.Absolute布局示例',
			frame:false,//渲染面板
			height : 150,
			width : 300,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				frame : true,
				height : 70,
				width : 100,
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [{
				x : 10,//横坐标为距父容器左边缘90像素的位置
				y : 10,//纵坐标为距父容器上边缘10像素的位置
				html : '子面板一',
				title : '子面板一'
			},{
				x : 130,//横坐标为距父容器左边缘130像素的位置
				y : 40,//纵坐标为距父容器上边缘40像素的位置
				html : '子面板二',
				title : '子面板二'
			}]
		});


    指定固定列宽示例:

    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.                 100//指定列宽为100像素   
    16.             },{   
    17.                 title:'子面板二',   
    18.                 100//指定列宽为100像素   
    19.             }]   
    20.         });  
    Ext.create('Ext.panel.Panel',{
			title:'Ext.layout.container.Column布局示例',
			layout : 'column',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				height : 100,
				frame : true
			},
			items: [{
				title:'子面板一',
				100//指定列宽为100像素
			},{
				title:'子面板二',
				100//指定列宽为100像素
			}]
		});


    使用百分比指定列宽:

    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.         });  
    Ext.create('Ext.panel.Panel',{
			title:'Ext.layout.container.Column布局示例',
			layout : 'column',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				height : 100,
				frame : true
			},
			items: [{
				title:'子面板一',
				columnWidth:.3//指定列宽为容器宽度的30%
				
			},{
				title:'子面板二',
				columnWidth:.7//指定列宽为容器宽度的70%
			}]
		});


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

    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.create('Ext.panel.Panel',{
			title:'Ext.layout.container.Column布局示例',
			layout : 'column',
			frame:true,//渲染面板
			height : 150,
			width : 350,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				height : 100,
				frame : true
			},
			items: [{
				title:'子面板一',
				width : 100//指定列宽为100像素
			},{
				title:'子面板二',
				columnWidth:.3//指定列宽为容器剩余宽度的30%
			},{
				title:'子面板三',
				columnWidth:.7//指定列宽为容器剩余宽度的70%
			}]
		});


    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.create('Ext.panel.Panel',{
			title:'Ext.layout.container.Table布局示例',
			layout : {
				type : 'table',//表格布局
				columns : 4 //设置表格布局默认列数为4列
			},
			frame:true,//渲染面板
			height : 150,
			width : 210,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				frame : true,
				width : 50,
				height : 50
			},
			items: [{
				title:'子面板一',
				width : 150,
				colspan : 3//设置跨列
			},{
				title:'子面板二',
				rowspan : 2,//设置跨行
				height : 100
			},
			{title:'子面板三'},
			{title:'子面板四'},
			{title:'子面板五'}]
		});


    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.                  100   
    26.             },{   
    27.                 title: 'east Panel',   
    28.                 frameHeader : true,   
    29.                 frame : false,   
    30.                 html : '右边',   
    31.                 region:'east',//指定子面板所在区域为east   
    32.                  100   
    33.             },{   
    34.                 title: 'Main Content',   
    35.                 html : '中间',   
    36.                 region:'center'//指定子面板所在区域为center   
    37.             }]   
    38.         });  
    Ext.create('Ext.panel.Panel',{
			title : 'Ext.layout.container.Border布局示例',
			layout:'border',//边框布局
			height : 250,
			width : 400,
			frame : true,
			renderTo: Ext.getBody(),
			defaults : {//设置默认属性
				collapsible : true
			},
			items: [{
				title: 'north Panel',
				html : '上边',
				region: 'north',//指定子面板所在区域为north
				height: 50
			},{
				title: 'South Panel',
				html : '下边',
				region: 'south',//指定子面板所在区域为south
				height: 50
			},{
				title: 'West Panel',
				html : '左边',
				region:'west',//指定子面板所在区域为west
				 100
			},{
				title: 'east Panel',
				frameHeader : true,
				frame : false,
				html : '右边',
				region:'east',//指定子面板所在区域为east
				 100
			},{
				title: 'Main Content',
				html : '中间',
				region:'center'//指定子面板所在区域为center
			}]
		});


    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.create('Ext.panel.Panel',{
			title : 'Ext.layout.container.HBox布局示例',
			layout:{
				type : 'hbox',//水平盒布局
				align : 'stretch'//子面板高度充满父容器
			},
			height : 150,
			width : 300,
			frame : true,
			renderTo: Ext.getBody(),
			items: [{
				title: '子面板一',
				flex : 1,
				html : '1/4宽(flex=1)'
			},{
				title: '子面板二',
				flex : 1,
				html : '1/4宽(flex=1)'
			},{
				title: '子面板三',
				flex : 2,
				html : '1/2宽(flex=2)'
			}]
		});


    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.                  150   
    13.             },{   
    14.                 title: 'Main Content',   
    15.                 html : '中间',   
    16.                 region:'center'//指定子面板所在区域为center   
    17.             }]   
    18.         });  
    Ext.create('Ext.container.Viewport',{
			layout:'border',//表格布局
			items: [{
				title: 'north Panel',
				html : '上边',
				region: 'north',//指定子面板所在区域为north
				height: 100
			},{
				title: 'West Panel',
				html : '左边',
				region:'west',//指定子面板所在区域为west
				 150
			},{
				title: 'Main Content',
				html : '中间',
				region:'center'//指定子面板所在区域为center
			}]
		});


    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.create('Ext.tab.Panel',{
			title : 'Ext.tab.Panel示例',
			frame : true,
			height : 150,
			width : 300,
			activeTab : 1,//默认激活第一个tab页
			renderTo: Ext.getBody(),
			items: [
				{title: 'tab标签页1',html : 'tab标签页1内容'},
				{title: 'tab标签页2',html : 'tab标签页2内容'},
				{title: 'tab标签页3',html : 'tab标签页3内容'},
				{title: 'tab标签页4',html : 'tab标签页4内容'},
				{title: 'tab标签页5',html : 'tab标签页5内容'}
			]
		});


    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页   
  • 相关阅读:
    图片切换的练习
    固定定位
    绝对定位
    相对定位
    全局作用域 变量声明
    3种循环语句 JS基础
    解除绑定事件 和 封装兼容性addEvent 来处理针对于不同浏览器的兼容方法
    插入排序法 猴子选大王 检索的数组 验证身份证号码 练习
    [z]JSONP例子
    ireport related
  • 原文地址：https://www.cnblogs.com/luluping/p/2243714.html
Copyright © 2011-2022 走看看