ExtJS布局与表单示例-优快云博客

本文链接：https://blog.youkuaiyun.com/dwj520/article/details/5027772

var panel = new Panel({
title: 'My Accordion' ,
layout: 'accordion' , //在这个面板中所使用的布局样式
layoutConfig: {
animate: true //布局指定的配置项写在这里
}
// 其他Panel的选项
});
*************************************************************************

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.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'//给错误提示留下10的空间,
});
var htmlEdt=new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true
});
var txt2 = new Ext.form.TextField({
fieldLabel: '请输入姓名',
allowBlank: false,
emptyText: '空',
maxLength: 50,
minLength: 10,
bodyStyle: 'padding-left:5px',
anchor: '90%'
//给错误提示留下10的空间
});
var frm1 = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 100,//注意修改标题的宽度
title: 'form1',
frame: true,
width: 700,
url: 'sender/data.aspx',
items: [{
layout: 'column',//正点的地方来了表示下一曾items都是按列"Column"排序
items: [{
columnWidth: .5,
layout: 'form',//第一列里面内容就是form排序了,从上到下
items: [txt2]
},
{
columnWidth: .5,
layout: 'form',//第二列里面内容就是form排序了,从上到下
items: [txt, tdate]
}]
}, htmlEdt]
});
frm1.render("frm");
});

**********************************************************************

Ext.layout.TableLayout对应面板布局layout配置项的名称为table。

这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。

必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项！

下面是表格布局的一个简单的示例

*********************************************************************************

****************************************************************************

var simpleForm = new Ext.FormPanel( {
    labelAlign: ' left ' ,
    title: ' 表单例子 ' ,
    buttonAlign: ' right ' ,
    bodyStyle: ' padding:5px ' ,
    width: 600 ,
    frame: true ,
    labelWidth: 80 ,
    items: [ {
        layout: ' column ' ,    // 定义该元素为布局为列布局方式
        border: false ,
        labelSeparator: ' ： ' ,
        items:[ {
            columnWidth:. 5 ,   // 该列占用的宽度，标识为50％
            layout: ' form ' ,
            border: false ,
            items: [ {                      // 这里可以为多个Item，表现出来是该列的多行
                cls : ' key ' ,
                xtype: ' textfield ' ,
                fieldLabel: ' 用户名 ' ,
                name: ' name ' ,
                anchor: ' 90% '
            } ]
        } , {
            columnWidth:. 5 ,
            layout: ' form ' ,
            border: false ,
            items: [ {
                cls : ' key ' ,
                xtype: ' textfield ' ,
                inputType: ' password ' ,
                fieldLabel: ' 口令 ' ,
                name: ' passwd ' ,
                anchor: ' 90% '
            } ]
        } ]
    } ]
} )