1 用column布局时要注意啦，不用像table布局方式那样要加上layoutConfig : {columns : 4 }来设置列的数目，而它是当外而设置了column布局后，那么它后的items内的每一个item都成一列，换行，那外面可以放上form布局，form布局默认每个item会自成一行，下面是一个大侠的例程：
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
var detailForm = new Ext.FormPanel({
id:"detail",
layout:"form",
labelWidth: 60,
labelAlign:"right",
border:false,
frame:true,
width: 600,//宽度设置要合理，如果FormPanel的宽度小于控件的宽度，column布局时控件不能正常显示
height:400,
// autoHeight:true,
// defaultType: 'textfield',//column布局时不能设置该属性，否则不能正常显示
items: [{//第一行
layout:"column",
items:[{
columnWidth:.3,//第一列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同编号',
name: 'contractId',
width:100
}]
},{
columnWidth:.3,//第二列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同名称',
name: 'contractId1',
width:100
}]
},{
columnWidth:.3,//第三列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同',
name: 'contractId2',
width:100
}]
}]},//第一行结束
{//第二行
layout:"column",
items:[{
columnWidth:.3,//第一列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同编号',
name: 'contractId',
width:100
}]
},{
columnWidth:.3,//第二列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同名称',
name: 'contractId1',
width:100
}]
},{
columnWidth:.3,//第三列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同',
name: 'contractId2',
width:100
}]
}]},//第二行结束
{//第三行
layout:"column",
items:[{
columnWidth:.3,//第一列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同编号',
name: 'contractId',
width:100
}]
},{
columnWidth:.3,//第二列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同名称',
name: 'contractId1',
width:100
}]
},{
columnWidth:.3,//第三列
layout:"form",
items:[{
xtype:"textfield",
fieldLabel: '合同',
name: 'contractId2',
width:100
}]
}]}//第三行结束
]
});
var win = new Ext.Window(
{
id:"window",
title: " 合同信息 " ,
layout: 'border',
width:600,
height:500,
closeAction:'hide',
plain: true,
items:[new Ext.TabPanel({
region: 'center',
deferredRender: false,
// layoutOnTabChange:true,//在TabPanel中采用column布局时，有时需要设置该属性
activeTab: 0, //活动的tab索引
items: [{
//contentEl: 'tab1',
title: '合同明细',
closable: false, //关闭项
autoScroll: false, //是否自动显示滚动条
layout:'fit',
collapsible: true,
split:true,
margins:'0 0 0 0',
items:[detailForm]
},{
//contentEl: 'tab2',
title: '规格明细',
closable: false, //关闭项
autoScroll: false, //是否自动显示滚动条
layout:'fit',
collapsible: true,
split:true,
margins:'0 0 0 0'
}]
})],
buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
// detailForm.destroy();
}
}]
});
//显示窗口
win.show();
});
2 ExtJS的layout中，有一个是'form'，这个layout有几点需要注意。
(1)：ExtJs中的textfield（Ext.form.TextField）的config中有一个叫fieldLabel 的，用于显示textbox前面的文字。这段文字要能显示，一定要使用form的layout，否则不会显示。
(2)：在使用form的layout之后，有效范围里的所有items将是默认的纵向格局，即使你将2个layout为form的panel放在一个layout为column的panel里，两个form依然是上下排列。
(3)form与column布局的label有时没显示，可能是column的作用域还存在，所以textfield的标签无法显示。可参考下面的程序：
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
title:'通过布局嵌套实现表单横排',
labelSeparator :'：', //分隔符
labelWidth : 50, //标签宽度
bodyStyle:'padding:5 5 5 5', //表单边距
frame : false,
height:150,
width:450,
applyTo :'form',
items:[
{//第一个面板
xtype : 'panel',
layout : 'column', //嵌套列布局
border : false, //不显示边框
defaults : { //应用到每一个子元素上的配置
border : false, //不显示边框
layout : 'form' //在列布局中嵌套form布局
},
items : [
{
columnWidth : .5, //列宽
items:{//将它去掉的时候，那标签就无法显示，因为这个items受的是column的作用，而我们加上items会就会用上面设置了的form布局，我也不知道它为什么会是这样的。
xtype:"textfield",
name:"password",
fieldLabel:"姓名"
}
},
{
columnWidth : .5, //列宽
labelSeparator :'：', //分隔符
items :[ {
xtype : 'radio',
name : 'sex', //名字相同的单选框会作为一组
fieldLabel:'性别',
boxLabel : '男'
}
]
},
{
xtype : 'radio',
name : 'sex', //名字相同的单选框会作为一组
hideLabel:true, //横排后隐藏标签
boxLabel : '女'
}
]
}
]
})
});
|
3 items内的item的布局、labelWidth及默认设置等都是有items同一级，并在它上面的才对它直接影响：
defaults:{xtype:"textfield",width:350},
layout:"form",
labelWidth:55,
frame:true,
items:[
{
fieldLabel:"身份证号",
name:"idetity"
},
{
fieldLabel:"具体地址",
name:"address"
}]
4 有时发布的项目访问时，没有效果，有可能是自己的文件的命名与EXTJS里的命名冲突了，导致没有显示。我用tree作页面的目录，就搞了半天也没有找出哪里出现问题，自己建的树目录就是怎样也出不来，后来才想到应该是名字的原因，改了就可以看到自己做的树了,还有可能是出现加载不能自己写的js的原因在html里没有加入字符编码方式，要切记js是以Union Code的方式，因此可以在html的head标签里加入<meta http-equiv="content-type" content="text/html; charset=UTF-8">以支持js里的中文，这也是要注意的地方。
分享到：
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs简明教程+Extjs学习笔记，来源网络，免费奉送，我讨厌需要资源分~
### EXTJS学习笔记 #### 一、EXTJS基础概念与命名空间管理 **EXTJS** 是一款基于JavaScript的开源框架，主要用于开发复杂的企业级Web应用。它的设计目标是提高前端开发效率并简化复杂的用户界面（UI）开发过程。在...
ExtJS 学习笔记 ExtJS 是一个功能强大且流行的 JavaScript 库，用于构建富互联网应用程序（RIA）。本文将通过一个简单的示例，介绍如何使用 ExtJS 构建一个 Hello World 网页，并且详细讲解 Ext.MessageBox 的使用...
语言程序设计资料：ExtJs学习笔记-2积分.doc
### Extjs 学习笔记之九：数据模型(上） #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色，它不仅为开发者提供了强大的数据处理能力，还极大地简化了前端与...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
适合ExtJs开发人员extjs技术上手以及深入
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...
### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件，用于向用户展示消息对话框。它包含了多种类型的消息对话框，每种对话框都有其特定用途。 - **Ext....
这个学习笔记涵盖了从基础到高级的多个主题，帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明： 1. **ExtJs 结构树**：这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树，包括...
在本篇学习笔记中，我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先，EXTJS的Grid由多个组件构成，其中最重要的是`ColumnModel`，它负责定义Grid中的列属性。在示例代码中，我们创建了一个`ColumnModel`对象...
ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序。...学习ExtJS可以帮助开发者快速构建功能丰富的、交互性强的Web应用。通过深入理解和实践，可以提升开发效率，创建出符合现代Web标准的用户界面。
以上介绍的只是Extjs布局管理中的一小部分，Extjs官网提供了丰富的例子和详细的文档，这是学习Extjs布局的最佳资源。通过官网的例子，可以直观地看到不同布局类型的效果和配置方法，极大地便利了开发者的布局实践和...