第 4 章 祝福吧！把表單和輸入控件都改成ext的樣式

4.1. 不用ext的form啊，不怕錯過有趣的東西嗎？

 



初看那些輸入控件，其實就是修改了css樣式表而已。你打開firebug看看dom，確實也是如此，從這點看來，似乎沒有刻意去使用ext的必要，誠然，如果單單要一個輸入框，不管添入什麼數據，就點擊發送到後台，的確是不需要ext呢。



你不想用一些預設的數據校驗嗎？你不想在數據校驗失敗的時候，有一些突出的提示效果嗎？你不想要超炫的下拉清單combox嗎？你不想要一些你做夢才能朦朧看到的選擇控件嗎？唉，要是你也像我一樣禁不起誘惑，勸你還是隨著慾望的節拍，試一下ext的form和輸入控件。

4.2. 慢慢來，先建一個form再說

 



var form = new Ext.form.Form({

    labelAlign: 'right',

    labelWidth: 50

});

form.add(new Ext.form.TextField({

    fieldLabel: '文本框'

}));

form.addButton("按鈕");

form.render("form");



簡單來說，就是構造了一個form，然後在裡邊放一個TextField，再放一個按鈕，最後執行渲染命令，在id="form"的地方畫出form和裡邊包含的所有輸入框和按鈕來。刷拉一下就都出來了。



不過即使這樣，圓角邊框可不是form自帶的，稍稍做一下處理，參見html裡的寫法。



<h3 style="margin-bottom:5px;">form</h3>





開頭結尾那些div就是建立圓角的，有了這些我們都可以在任何地方使用這種圓角形式了，不限於form喲。



html例子，1.x在lingo-sample/1.1.1/04-01.html



2.0裡的FormPanel跟1.x裡已經基本完全不一樣了，咱們先看個簡單例子︰



代碼如下︰



var form = new Ext.form.FormPanel({

    defaultType: 'textfield',

    labelAlign: 'right',

    title: 'form',

    labelWidth: 50,

    frame: true,

    width: 220,



    items: [{

        fieldLabel: '文本框'

    }],

    buttons: [{

        text: '按鈕'

    }]

});

form.render("form");



html裡不需要那麼多東西了，只需要定義一個div id="form"就可以實現這一切。明顯可以感覺到初始配置更緊湊，利用items和buttons指定包含的控件和按鈕。



現下先感覺一下，我們後面再仔細研究，例子見lingo-sample/2.0/04-01.html。

4.3. 胡亂掃一下輸入控件

 



兄弟們應該都有html開發的經驗了，像什麼input用的不在少數了，所以咱們在這裡也不必浪費唾沫，大概掃兩眼也知道ext的輸入控件是做什麼的。



   1.



      像TextField，TextArea，NumberField這類當然是可以隨便輸入的了。

   2.



      ComboBox，DateField繼承自TriggerField。他們長相差不多，都是一個輸入框右邊帶一個圖片，點擊以後就跳出一大堆東西來讓你選擇，輸入框裡頭顯示的是你選中的東西。

   3.



      Checkbox和Radio，ext沒有過多封裝，基本上還是原來的模式。

   4.



      Button，這個東東其實就是一個好看的div，跟comboBox一樣，不是對原有組件的美化，而是重新做的輪子。你可以選擇用以前那種難看的 type="button"，還是用咱們漂亮的div，看你的愛好了。type="submit"和type="reset"也一樣沒有對應的組件，都使用Button好了。

   5.



      檔案上傳框，type="file"，因為瀏覽器的安全策略，想上傳檔案，必須使用type="file"，而且我們不能使用js修改上傳框的值，所以非常郁悶，目前的模式是把它隱藏起來，然後在點擊咱們漂亮的Button時，觸發上傳框的點擊事件，從而達到上傳的目的。在這方面extjs.com論壇上有不少實現上傳的擴展控件，咱們可以參考一下。



4.4. 起點高撒，從comboBox往上蹦。

 



我覺得像TextField啊，TextArea啊，都是在原來的東西上隨便加了幾筆css弄出來的，大家都會用，所以沒什麼大搞頭，最後綜合起來一說就 ok了。而這個comboBox跟原有的select一點兒關係都沒有，完全是用div重寫畫的。所以，嘿嘿~



耳聽為虛，眼見為實，先看看所謂的comboBox究竟是個什麼模樣。



漂亮不？漂亮不？怎么看都比原生select強喲。啦啦啦，咱們看看代碼撒。不過呢，comboBox支援兩種構造模式，一一看來。

4.4.1. 憑空變出個comboBox來。

 

4.4.2. 把select變成comboBox。

 

4.4.3. 破例研究下comboBox的內在本質喲

 

4.4.4. 嘿嘿~本地的做完了，試試遠程滴。

 

4.4.5. 給咱們的comboBox安上零配件

 

4.4.6. 每次你選擇什麼，我都知道

 

4.4.7. 露一小手，組合上面所知，省市縣三級級聯。哈哈~

 



這是一個相當典型的案例，以前經常用select做，現下用comboBox實現的效果又會如何呢？

4.4.7.1. 先做一個類比的，所有數據都在本地

 

4.4.7.2. 再做一個有後台的，需要放在伺服器上咯

 

4.5. 還要做，字段驗証呀，表單提交啊，表單佈局咯，檔案上傳喲