學(xué)習(xí)ExtJS table布局
更新時間:2009年10月08日 00:06:20 作者:
ExtJS table布局使用說明,需要的朋友可以參考下。
一、Table布局由類Ext.layout.TableLayout定義,類以于html中的table,可以對行或列進(jìn)行合并。
layoutConfig使用columns指定父容器分成3列,
rowspan合并行數(shù)目。
colspan合并列數(shù)目。
二、應(yīng)用舉例
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中的內(nèi)容",rowspan:2,height:100},
{title:"子元素2",html:"這是子元素2中的內(nèi)容",colspan:2},
{title:"子元素3",html:"這是子元素3中的內(nèi)容"},
{title:"子元素4",html:"這是子元素4中的內(nèi)容"}
]
}
);
layoutConfig使用columns指定父容器分成3列,
rowspan合并行數(shù)目。
colspan合并列數(shù)目。
二、應(yīng)用舉例
復(fù)制代碼 代碼如下:
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中的內(nèi)容",rowspan:2,height:100},
{title:"子元素2",html:"這是子元素2中的內(nèi)容",colspan:2},
{title:"子元素3",html:"這是子元素3中的內(nèi)容"},
{title:"子元素4",html:"這是子元素4中的內(nèi)容"}
]
}
);
相關(guān)文章
Extjs Label的 fieldLabel和html屬性值對齊的方法
這篇文章主要介紹了Extjs Label的 fieldLabel和html屬性值不能對齊的解決方法,需要的朋友可以參考下2014-06-06JavaScript的Ext JS框架中的GridPanel組件使用指南
GridPanel和TreePnal功能類似,都是Ext JS中的表格便攜利器,相比之下GridPanel還要更強大并且更復(fù)雜一些,下面我們就來整理一下JavaScript的Ext JS框架中的GridPanel組件使用指南2016-05-05ExtJS Ext.MessageBox.alert()彈出對話框詳解
Ext.MessageBox是一個工具類,他繼承自O(shè)biect對象,用來生成各種風(fēng)格的信息提示對話框,Ext.Msg是該類的別名,使用Ext.MessageBox和用Ext.Msg效果是一樣的,而后者提供了更簡單的方式。2010-04-04extjs4 treepanel動態(tài)改變行高度示例
本文為大家介紹下extjs4 treepanel如何動態(tài)改變行高度,下面有個不錯的示例,感興趣的朋友可以參考下2013-12-12