1:Ext.layout.ColumnLayout
它是为构建某个垂直式结构而准备的布局,当中包含已指定宽度的多个列,可以使用columnWidth或者width来指定子元素所占的列宽度
属性width总是以像素来固定宽度,并必须是数字大于或者等于1,属性columnWidth是百分比相对单位,并必须是百分比字符串区间是大于0小于1
使用columnWidth属性来分配列时,columnWidth加起来必须是等于1(或110%),否则渲染出来的布局可能会出现不正常。
2:指定列宽度的三种方式
第一:通过width属性来指定列宽度
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>使用width属性指定列宽度</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { new Ext.Panel({ renderTo: 'column', width: 500, height: 150, title: 'Columnayout', layout: 'column', //指定布局方式为column defaults: { bodyStyle: 'background-color: #FFFFFF', //设置面板的背景色 frame: true }, frame: true, items: [ {title: 'first', html: '第一列', width: 200, height: 100}, {title: 'second', html: '第二列', width: 200, height: 100}, ] }); }); </script> </head> <body> <div id="column"></div> </body> </html>
程序效果:
通过设置子面板的width属性,来设定固定的列宽度分别为200、200以及剩余的宽度。
第二:columnWidth属性指定列宽度
代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>columnWidth属性指定列宽度</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { new Ext.Panel({ renderTo: 'column', width: 500, height: 150, title: 'Columnayout', layout: 'column', //指定布局方式为column frame: true, defaults: { bodyStyle: 'background-color: #FFFFFF', //设置面板的背景色 frame: true }, items: [ //通过columnWidth属性来指定宽占容器的百分比 {title: 'first', html: '第一列', columnWidth: 0.4, height: 100}, {title: 'second', html: '第二列', columnWidth: 0.6, height: 100}, ] }); }); </script> </head> <body> <div id="column"></div> </body> </html>
程序效果图:
第三: width和columnWidth属性指定列宽度
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>columnWidth属性指定列宽度</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { new Ext.Panel({ renderTo: 'column', width: 500, height: 150, title: 'Columnayout', layout: 'column', //指定布局方式为column frame: true, defaults: { bodyStyle: 'background-color: #FFFFFF', //设置面板的背景色 frame: true, height: 100 }, items: [ {title: 'first', html: '第一列', width: 150}, // 指定列宽度为150像素 {title: 'second', html: '第二列', columnWidth: 0.4}, //指定列宽度为剩下宽度的40% {title: 'third', html: '第三列', columnWidth: 0.6} //指定列宽度为剩下宽度的60% ] }); }); </script> </head> <body> <div id="column"></div> </body> </html>
程序效果:
设置panel的宽度为500,
第一列宽度=150(因为第一列是通过width配置项指定的固定值)
第二列宽度=(500-150)* 0.4 (按比例分割剩余宽度)
第三列宽度=(500-150)* 0.6(说明:按比例分割剩余宽度)
相关推荐
NULL 博文链接:https://huiqinbo.iteye.com/blog/2217105
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
extjs-theme-bootstrap-master.zip
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
第二十四讲:extjs4.0的高级组件form补充01 第二十五讲:extjs4.0的高级组件form补充02 第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2218833
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ext-2.3.0及教程,可以根据教程对Extjs有个了解
第二十四讲:extjs4.0的高级组件form补充01 第二十五讲:extjs4.0的高级组件form补充02 第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的...
第二讲:extjs4.0的新特性 第三讲:extjs4.0数据模型--Model 第四讲:extjs4.0的数据代理-Proxy 第五讲:extjs4.0的读写器reader,writer 第六讲:extjs4.0的数据集store 第七讲:extjs4.0的事件机制Event 第八讲:...
这是一个Ext框架,我对此框架很感兴趣。。。特别想了解一下。。。
第二十四讲:extjs4.0的高级组件form补充01 第二十五讲:extjs4.0的高级组件form补充02 第二十六讲:extjs4.0的高级组件panel和layout上 第二十七讲:extjs4.0的高级组件panel和layout下 第二十八讲:extjs4.0的高级...
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
第二十四讲: EXTJS4.0的高级组件Form补充01 第二十五讲: EXTJS4.0的高级组件Form补充02 第二十六讲: EXTJS4.0的高级组件Panel和Layout上 第二十七讲: EXTJS4.0的高级组件Panel和Layout下 第二十八讲: EXTJS4.0的高级...
Alien::Web::ExtJS::V3 - ExtJS 3.x 源的 Perl 发行版 版本 ExtJS v3.4.11 (GPL) 概要 use Alien::Web::ExtJS::V3 '3.4.11'; my $dir = Alien::Web::ExtJS::V3->dir; print "ExtJS sources are installed in: $dir\...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219726
Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时...
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子