Extjs table layout 控制宽高,实现类似win10开始菜单分屏效果的

1.期望效果

类似win10开始菜单(如下图),将页面切成m*n个单元格,然后将内容放到单元格里,用colspan、rowspan控制所占区域大小。

2.Extjs table layout

Extjs table layout 是对css table layout的简单封装,无法通过 tableAttrs, tdAttrs, trAttrs 实现对内容高度的绝对控制,各种不可控,以至于有人说:“I never use table layout. I haven't yet seen a real use case where it wasn't better to use an alternative layout (usually VBox and HBox in some combination). All sorts of strange things happen using a table layout. ”。

但用vbox+hbox又做不到一行中table layout这么灵活的组合。

3.换个思路

既然table layout不能直接控制住内容的高度,干脆就只让table layout划分单元格,单元格中的内容高度、宽度由代码控制,确保不超高超宽。

4.主要代码

//只用最简单的风格设置
layout = {
    type: 'table',
    columns: maxcol //根据配置的内容计算
},

//代码控制内容(items)的宽高
onResize: function(width, height, oldWidth, oldHeight) {
    var me = this;
    Ext.suspendLayouts();
    for(var item of me.items.items){
        item.setHeight(item.rowspan*height/me.maxrow);
        item.setWidth(item.colspan*width/me.maxcol);
    }
    Ext.resumeLayouts(true);
}

 

 

一.该类的作用: 该类可以帮大家自动布局界面控件,不需要开发人员每个控件的设置属性,只需要调用方法,自动会设置该控件的布局,并且控件的宽度随着窗体的变化而变化,该方法调用很简单 二.原理:使用TableLayOutPanle的功能,然后设定里面每个控件的样式 三.使用方法: 1)首先在录入数据的地方用GroupBox或者Panle作为容器(目前里面配置了这2中数据信息用户可以在ParentControlHeader类中进行相应配置) 2)然后在该容器中加入TableLayOutPanle控件,并设定行和列(例如:设定6列,奇数列的宽度都是绝对值:例如100px ,偶数列的宽度都设定为33%) 3)大家可以把相应的控件放入到TableLayOutPanle的相应单元格子中,(奇数列是标题列,偶数列是输入列) 4)在Load事件中这样调用就OK了 TableFormat tf = new TableFormat(tableLayoutPanel1); //此方法可以适用于父级控件是GroupBox或者Panel,您也可一修改 ParentControlHeader类中的配置文件,加入新的值,或者是修改已经设定的值 tf.SetTableFormat(true, PControlType.GroupControl); 这样,大家不需要设定每个TableLayout控件中的子控件的任何属性,TableFormat类帮自动布局界面上的控件,并且随着窗体的变化,控件是自动变化的,当然里面有些参数,是可以设定父级控件(GroupPanle/Panle的高度=里面行高(自动计算)+用户配置高度(目前配置了GroupBox和Panle) 详细可见Demo,代码注释写的比较详细,大家可以参考下. 谢谢..^_^.. (鼓励0资源分上传)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值