ExtJS學習之路第五步 認識最常見元件Panel

2022-03-09 05:33:25 字數 2534 閱讀 1589

文件中描述

panel(面板)是乙個容器,它具有特定的功能和結構部件,這使它成為面向應用使用者介面的完美基石。

面板,繼承自ext.container.container,能夠配置布局以及子元件(child components)。

當向panel中新增指定的子項(child items)或者動態的新增元件時,記得要考慮如何排版panel中的子元素,這些子元素是否需要ext內建layout布局的方案。預設情況下,panel使用自動(auto)布局。這種方式,只是呈現子元件,乙個接乙個向container容器中追加,並且不能適用於任意大小。

panel可以包含底部和頂部的工具欄,以及獨立的頁首,頁尾和正文部分。panel還提供了內建可折疊、可擴充套件和可關閉的行為。panel能夠很容易的新增到container或layout。布局和渲染管線完全由框架管制。

注意:預設情況下,關閉頁首工具破壞了panel,導致移動panel和所有子元件的破壞。這使得panel物件和它的所有後代元素無法使用。要啟動關閉工具(close tool)簡單的隱藏面板,供以後再次使用,配置面板closeaction:'hide'。

通常情況下,在應用中,panel被用來作為container的子項,並且自己使用ext.components作為子項。

基本用法

為了簡單的說明如何把panel渲染到文件中,我們這樣做。

//配置引數(只列舉部分常用引數)

1.autoload:有效的url字串,把那個url中的body中的資料載入顯示,但是可能沒有樣式和js控制,只是html資料

2.autoscroll:設為true則內容溢位的時候產生滾動條,預設為false

3.autoshow:設為true顯示設為"x-hidden"的元素,很有必要,預設為false

4.bbar:底部條,顯示在主體內,//**:bbar:,

5.tbar:頂部條,顯示在主體內,//**:tbar:,tbar,lbar,rbar,bbar:分別設定上、左、右、下四個部位的工具欄

6.buttons:按鈕集合,自動新增到footer中(footer引數,顯示在主體外)//**:buttons:

7.buttonalign:footer中按鈕的位置,列舉值為:"left","right","center",預設為right

8.collapsible:設為true,顯示右上角的收縮按鈕,預設為false

9.draggable:true則可拖動,但需要你提供操作過程,預設為false

10.html:主體的內容

11.id:id值,通過id可以找到這個元件,建議一般加上這個id值

12.width:寬度

13.height:高度

14.title:標題

15.item:主體部分元件如何

16.titlecollapse:設為true,則點選標題欄的任何地方都能收縮,預設為false.

18.contentel:(id)元件渲染之後,將該元素新增到內部。

19.renderto:(id)在該元素裡渲染元件html元素裡面

例子:

<

div

id="conpanel"

>測試contentel

div>

<

div

id="addpanel"

>測試renderto

div>

ext.onready(function

());

});

效果:

xtype

xtype:在extjs的視覺化元件部署中的一種機制,即通過指定xtype的值,來告訴容量如何初始化所包含的級件,如xtype:"textfiled",表示使用ext.form.textfile來進行初始化當前元件。

ext.create('ext.panel.panel',, ], 

//子項

contentel:"conpanel",

renderto:ext.get("addpanel") //

常用的還有ext.getbody()

chrome截圖**

新增按鈕欄

var mypanel=ext.create('ext.panel.panel', }

],bbar:[

}],

/*dockeditems: [},]},

,]}], 上面按鈕的寫法也可以這樣來

*/items: [, ],

//子項

contentel:"conpanel",

renderto:ext.get("addpanel") //

常用的還有ext.getbody()

對panel是否有個大概的了解呢?

SQLite轉殖 第五步 游標抽象

從這一節開始,我們要準備在我們的資料庫中使用b tree資料結構來存放資料便於加快檢索速度。首先我們需要引入乙個概念 游標 cursor 我們利用游標來表示資料表內的位置。我們利用游標可以實現 這是我們目前需要實現的功能。在接下的步驟中,我們還希望可以實現 首先我們來看一下游標的結構 typedef...

Hibernate入門案例 第五步 實現新增操作

hibernate入門案例 第一步 搭建hibernate環境 hibernate入門案例 第二步 第二步,建立實體類和表 hibernate入門案例 第三步 配置實體類和資料庫一一對應關係 對映關係 hibernate入門案例 第四步 建立hibernate的核心配置檔案 hibernate入門案...

第五步 整合SpringTask(實現定時任務)

1 新增依賴 由於springtask已經存在於spring框架中,不需要額外新增依賴 2 新增spring task配置package com.hzf.mymall.config import org.springframework.context.annotation.configuration...