sssssssssss

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兩個配置項！

   下面是表格佈局的一個簡單的示例

<script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'Ext.layout.TableLayout佈局示例',
   layout : 'table',
   layoutConfig : {
    columns : 4 //設置表格佈局默認列數爲4列
   },
   frame:true,//渲染面板
   height : 150,
   applyTo :'panel',
   defaults : {//設置默認屬性
    bodyStyle:'background-color:#FFFFFF;',//設置面板體的背景色
    frame : true,
    height : 50
   },
   items: [
    {
     title:'子面板一',
     colspan : 3   //設置跨列
    },
    {
     title:'子面板二',
     rowspan : 2,  //設置跨行
     height : 100
    },
    {title:'子面板三'},
    {title:'子面板四'},
    {title:'子面板五'}
   ]
  })
 });
</script>

 

 

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

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");
});

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

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% '
            } ]
        } ]
    } ]
} )