您的位置：首页 > Web前端 > JavaScript

Extjs布局

2015-06-28 10:38 711 查看
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>


工程架构视图：



最终效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航