表單設計器3-查詢面板

1.打開對象屬性，咱們新建了一張員工表，並添加了字段，其中department（所屬部門）字段咱們設置爲了對象屬性，與部門表關聯起來如圖1所示。

 

圖1

2.接下來看查詢面板，首先在設計頁面如圖2咱們在面板找到主表，將主表面板拖至設計頁面，這是會彈出讓咱們選擇綁定對象和字段，咱們選擇剛新建的員工表，並將員工表裏的字段都勾選上，點擊肯定，主表面板就行了。

 

圖2

 

3.建立好的面板如圖3，若是咱們不須要1處的按鈕，能夠選中一個個刪除掉，這時咱們在2處發現年齡字段在第一個不符合咱們的審美，咱們能夠點擊3處的+號按鈕便可彈出新增按鈕，這裏咱們新增字段或者刪除字段以及爲字段排序，能夠點擊4處的符號依次是置頂、向上一個、向下一個、置底，能夠根據須要來排序，也能夠在這裏調整數據類型、長度、是否可檢索、是否可排序、是否隱藏等等，在5處咱們發現有兩個所屬部門，由於這個字段是對象屬性，須要關聯其餘表，因此咱們設計了一個存儲後臺ID的值用後綴-號來加以區分，這裏默認給他是隱藏

 

 

圖3

4.檢索功能，咱們在對每一個字段進行設計的前提是要把主表面板是否可檢索選擇true選項如圖4，才能使用.

 

圖4

5.圖5所示的就是爲字段設置了檢索功能以後顯示。

 

圖5

6.而後用佈局面板爲頁面添加一些控件，如圖6所示的佈局，紅框爲一個佈局面板，裏面放若干控件，下方放檢索麪板按鈕，年齡和生日由於要作成範圍檢索，複製了兩個也用佈局面板,黃框用的標籤。

 

圖6

7.黃色框部分用的標籤來佈局，拖拽標籤控件到箭頭處點擊編輯文本，填寫內容確認便可

 

圖7

 

8.由於年齡範圍內咱們是複製的控件，在後臺會提示重複，因此咱們將它的name和空間id改爲不同的。而且將showlabe改爲false這樣空間的標籤名就隱藏掉，只顯示咱們拖拽的標籤控件的內容，同理生日也是同樣。

 

9.範圍查詢確定得有比較，誰先誰後咱們得定義好，以年齡的控件來顯示

 

這個表示要大於等於輸入框的值，後面的同樣設置comparison:」<=」這樣就有範圍的控制了。

到了這一步檢查的功能就完成了，接下來只用輸入條件點擊查詢就好了。

 

ExtJs3.2.表單設計器源碼,自定義建表，自定義建庫

 源碼下載：http://www.rrbay.com/ework.html