布局用于定义容器如何组织内部子元素和控制子元素的大小。 ExtJS中有两种类型的布局：Container容器类布局与Component组件类布局。 Containter容器类布局：负责容器内容Extjs元素和调整Extjs元素的大小。 包括：Border布局、Box布局、Fit布局等等。 Component组件类布局：负责组织组件的HTML元素。 包括：Dock布局、Toolbar布局、Field布局、TriggerField布局。 一、Containter布局： 我们首先拿一张...
利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局，当然，使用《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接）中的vbox也是可以的。其实ExtJs的表单插件与表单布局并不是关键，ExtJs的表单验证还好，就几行语句就能够完成。关键是ExtJs的表单提交必须通过Ajax方式，而在后台必须传回一个Json完成表单的提交，可能有点复杂，下面就以php作为ExtJs的后台处理来说明问题ExtJs的...
准备工作，布置一个最简单的Form，共5个组件，都为textfield。 1 Ext.onReady(function(){2 Ext.create(‘Ext.form.Panel‘, {3 width: 500,4 title: ‘Layout‘,5 renderTo : ‘form‘,6 items: [{7 xtype : ‘textfield‘,8 fieldLabel : ‘edit1‘,9 name : ‘edit1‘, 10 },{ 11 xtype : ‘textfield‘, 12 fieldLa...
我们先来看看前台JS： Ext.onReady(function() { Ext.QuickTips.init();// 浮动信息提示 Ext.form.Field.prototype.msgTarget = ‘side‘;// 设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId] Ext.BLANK_IMAGE_URL = ‘resources/images/default/s.gif‘;// 替换图片文件地址为本地 var simpleForm = new Ext.FormPanel({ renderTo : document.body, labelAlign : ‘left‘, title : ‘表...
一、Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列， rowspan合并行数目。 colspan合并列数目。 二、应用举例 代码如下:Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), width:500, height:200, layout:"table", layoutConfig: { columns: 3 }, items:[{title:"子元素1",html:"这是子元素1...
该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码： 代码如下:Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items:[{region:"north", height:50, title:"顶部面板"}, {region:"south", height:50, title:"底部面板"}, {region:"center", title:"...
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。看代码： 代码如下:Ext.onReady(function(){ new Ext.Panel({ renderTo...
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = under; //第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有： var tdate = new Ext.form.DateField({ fieldLabel: 日期, emptyText: 请选择日期, format: Y-m-d, disabledDays: [0, 7] }); var txt = new Ext.form.Te...
一、Accordion布局由类Ext.layout.Accordion定义，表示可折叠的布局，点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板。 layoutConfig：true表示在执行展开折叠时启动动画效果，默认值为false。 二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"accordion", layoutConf...
一、Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列， rowspan合并行数目。 colspan合并列数目。 二、应用举例 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), width:500, height:200, layout:"table", layoutConfig: { columns: 3 }, items:[{title:"子元素1",html:"这是子元素...
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels：tru表示隐藏标签，默认为false。 labelAlign：标签队齐方式left、right、center,默认为left。 代码如下: Ext.onReady(function(){ var _panel = new Ext.Panel({ title:"人员信息", renderTo:Ext.getBody(), frame:true, width:500, height:300, layout:"...
一、Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody(), title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] } ); });
一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items:[{region:"north", height:50, title:"顶部面板"}, {region...
一、属性（构造参数） baseCls:"x-plain" Panel背景色颜色。 layout:"column" Panel进行列布局。 在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度。 width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。 二、应用举例 代码如下: Ext.onReady(function(){ new Ext.Window({ title:"新增", width:500, height:400, plain:true, layout:"form",...
以下是自己扩展的FieldSet： 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: column, fieldSetItems: [], autoScroll:false, defaults: { layout: form, labelAlign: right, labelWidth: 65, columnWidth: .25, defaults: { anchor: 96% } }, initComponent: function(){ var thisItems = new Array(); var itemsLen = this.fieldSetItems.length; if(itemsLen > 0){ for (var i = 0; i < itemsLen; i++)...