源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

学习ExtJS Column布局

  • 时间:2020-09-02 06:03 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:学习ExtJS Column布局
一、属性(构造参数) baseCls:"x-plain" Panel背景色颜色。 layout:"column" Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。 二、应用举例
[u]复制代码[/u] 代码如下:
Ext.onReady(function(){ new Ext.Window({ title:"新增", width:500, height:400, plain:true, layout:"form", labelWidth:55, items:[{ layout:"column", baseCls:"x-plain", style:"padding:5px", items:[{ columnWidth:.5, layout:"form", labelWidth:50, baseCls:"x-plain", items:[{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" },{ xtype:"textfield", fieldLabel:"姓名" }] },{ columnWidth:.5, layout:"form", items:[{ id:"name", xtype:"textfield", fieldLabel:"照片", inputType:"image", width:250, height:50 }] }] },{ xtype:"textfield", fieldLabel:" 证号" }], showlock:false, listeners:{ "show":function(_window){ if f(!_window["showLock"]){ Ext.getCmp("name").getEl().dom.src = "default_pic.gif" ; _window.findByType("textfield")[4].getEl().dom.src = "default_pic.gif" ; // alert(_window.findByType("textfield")[4].fieldLabel); _window["showLock"]=true; } } }, buttons:[{text:"确定"},{text:"取消"}] }).show() ; }) ;
[u]复制代码[/u] 代码如下:
Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"column", items:[{title:"列1",width:200}, {title:"列2",columnWidth:.3}, {title:"列3",columnWidth:.3}, {title:"列4",columnWidth:.4} ] }) }) ;
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部