Extjs布局

最新推荐文章于 2017-03-23 14:13:17 发布

JuneHwa

最新推荐文章于 2017-03-23 14:13:17 发布

阅读量402

点赞数

分类专栏：前端文章标签： javascript extjs 布局

本文链接：https://blog.csdn.net/u010784959/article/details/46669739

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

newinfo.js

Ext.onReady(function() {
	var list = [['语文', '语文'], ['数学', '数学'], ['英语', '英语']];

	var store = new Ext.data.SimpleStore({
				fields : ['value', 'text'],
				data : list
			});

	var combo = new Ext.form.ComboBox({
				fieldLabel : '科目',
				name : 'combo',
				id:'subject',
				store : store,
				displayField : 'text',
				valueField : 'value',
				mode : 'local',
				allowBlank : false
			});

	var panel = new Ext.Panel({
				renderTo : Ext.getBody(),
				width : 800,
				height : 110,
				layout : 'border',
				items : [{
							region : 'west',
							width : 600,
							xtype : 'fieldset',
							title : '信息',
							items : [{
								layout:'form',
								border:false,
								items:[{
									layout : 'column',
									items : [{
													columnWidth:0.35,
													xtype : 'form',
													border : false,
													labelWidth:30,
													items : combo
												}, {
													columnWidth:0.65,
														xtype : 'radiogroup',
														id:'sex',
														items : [{
																fieldLabel : '性别',											
																boxLabel : '男',
																name : 'radio',																
																value : '1',
																checked : true
															}, {
																boxLabel : '女',
																inputValue:'女',
																name : 'radio',
																value : '2'
															}]													
												}]
								},{
										// 第二行
										layout : 'column',
										items : [{
													columnWidth : 0.75,
													layout : 'form',
													border : false,
													labelWidth:40,
													items : [{
																xtype : 'textfield',
																fieldLabel : '分数',	
																name : 'score',
																id:'score',
																emptyText : '输入分数'
													}]
												}, {
													columnWidth : 0.25,
													layout : 'form',
													border : false,
													items:[{
														xtype : 'button',
														text : '打开'
													}]												
												}]
								}]
						}]
				}, {
							region : 'center',
							width : 200,
							layout : 'column',
							items : [{
								columnWidth : 0.33,
								items : [{
											xtype : 'panel',
											border : false,
											height : 110
										}]
							}, {
								columnWidth : 0.33,								
									layout : 'form',
									border:false,
									items:[{
										xtype : 'button',
										text : '确定',
										width : 100,
										height : 20,
										handler: function(){
												var location=Ext.getCmp("score").getValue();
												var subject=Ext.getCmp("subject").getValue();
												var choices=Ext.getCmp("sex").items['items'];
												for(var i=0;i<choices.length;i++)
												{
													if(choices[i].checked)
													{
														var sex=choices[i].boxLabel;
													}
												}
												alert(location+"\t"+subject+"\t"+sex);
										}
								}, {
									xtype : 'panel',
									border : false,
									height : 60
								}, {
									xtype : 'form',
									border:false,
									items : [{
										xtype:'button',
										text : '取消',
										width : 100,
										height : 20
									}]
							}]
						}, {
								columnWidth : 0.33,
								items : [{
											xtype: 'panel',
											border : false,
											height : 110											
										}]	
						}]
				}]
	});				
});

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>My Extjs Guide</title>
	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="./js/newinfo.js"></script>
</head>
<body>
		
</body>
</html>

工程架构视图：