Extjs布局

来源：互联网发布：淘宝待发货什么意思编辑：程序博客网时间：2024/05/21 18:43

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>

工程架构视图：

最终效果图：

0 0