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

1、本文格式為word版，下載可任意編輯第,4,章,祝福吧！把表單和輸入控件都改成ext樣式x 第 4 章 祝愿吧！把表單和輸入控件都改成 ext 的樣式 4.1. 不用 ext 的 的 form 啊，不怕錯過好玩的東西嗎？ 初看那些輸入控件，其實就是修改了 css 樣式表而已。你打開 firebug 看看 dom，的確也是如此，從這點看來，好像沒有刻意去使用 ext 的必要，誠然，假如單單要一個輸入框，不管添入什么數(shù)據(jù)，就點擊發(fā)送到后臺，的確是不需要 ext 呢。 你不想用一些默認的數(shù)據(jù)校驗嗎？你不想在數(shù)據(jù)校驗失敗的時候，有一些突出的提示效果嗎？你不想要超炫的下拉列表 combox 嗎？你不想要

2、一些你做夢才能朦朧看到的選擇控件嗎？唉，要是你也像我一樣禁不起誘惑，勸你還是隨著欲望的節(jié)拍，試一下 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); 簡潔來說，就是構(gòu)造了一個 form，然后在里邊放一個 textfield，再放一個按鈕，最終執(zhí)行渲染命令

3、，在 id=form的地方畫出 form 和里邊包含的全部輸入框和按鈕來。刷拉一下就都出來了。 不過即使這樣，圓角邊框可不是 form 自帶的，稍稍做一下處理，參見 html 里的寫法。 div style=width:220px;margin-left:0px; div class=x-box-tldiv class=x-box-trdiv class=x-box-tc/div/div/div div class=x-box-mldiv class=x-box-mrdiv class=x-box-mc h3 style=margin-bottom:5px;form/h3 div id=for

4、m/div /div/div/div div class=x-box-bldiv class=x-box-brdiv class=x-box-bc/div/div/div /div div class=x-form-clear/div 開頭結(jié)尾那些 div 就是建立圓角的，有了這些我們都可以在任何地方使用這種圓角形式了，不限于 form 喲。 html 例子，1.x 在 lingo-sample/1.1.1/04-01.html 2.0 里的 formpanel 跟 1.x 里已經(jīng)基本完全不一樣了，咱們先看個簡潔例子： 代碼如下： var form = new ext.form.formpan

5、el( defaulttype: textfield, labelalign: right, title: form, labelwidth: 50, frame: true, width: 220, items: fieldlabel: 文本框 , buttons: text: 按鈕 ); form.render(form); html 里不需要那么多東西了，只需要定義一個 div id=form就可以實現(xiàn)這一切。明顯可以感覺到初始配置更緊湊，利用 items 和 buttons 指定包含的控件和按鈕。 現(xiàn)在先感覺一下，我們后面再認真討論，例子見 lingo-sample/2.0/04-01

6、.html。 4.3. 胡亂掃一下輸入控件 兄弟們應(yīng)當都有 html 開發(fā)的閱歷了，像什么 input 用的不在少數(shù)了，所以咱們在這里也不必鋪張唾沫，也許掃兩眼也知道 ext 的輸入控件是做什么的。 1. 像 textfield，textarea，numberfield 這類當然是可以任憑輸入的了。 2. combobox，datefield 繼承自 triggerfield。他們長相差不多，都是一個輸入框右邊帶一個圖片，點擊以后就跳出一大堆東西來讓你選擇，輸入框里頭顯示的是你選中的東西。 3. checkbox 和 radio，ext 沒有過多封裝，基本上還是原來的方式。 4. button

7、，這個東東其實就是一個好看的 div，跟 combobox 一樣，不是對原有組件的美化，而是重新做的輪子。你可以選擇用以前那種難看的 button，還是用咱們美麗的 div，看你的愛好了。type=submit和type=reset也一樣沒有對應(yīng)的組件，都使 用 button 好了。 5. 文件上傳框，type=file，由于掃瞄器的平安策略，想上傳文件，必需使用type=file，而且我們不能使用 js 修改上傳框的值， 所以特別郁悶，目前的方式是把它隱蔽起來，然后在點擊咱們美麗的 button 時，觸發(fā)上傳框的點擊大事，從而達到上傳的目的。在這方面 論壇上有不少實現(xiàn)上傳的擴展控件，咱們可以

8、參考一下。 4.4. 起點高撒，從 combobox 往上蹦。 我覺得像 textfield 啊，textarea 啊，都是在原來的東西上任憑加了幾筆 css 弄出來的，大家都會用，所以沒什么大搞頭，最終綜合起來一說就 ok 了。而這個combobox 跟原有的 select 一點兒關(guān)系都沒有，完全是用 div 重寫畫的。所以，嘿嘿 耳聽為虛，眼見為實，先看看所謂的 combobox 畢竟是個什么模樣。 美麗不？美麗不？怎么看都比原生 select 強喲。啦啦啦，咱們看看代碼撒。不過呢，combobox 支持兩種構(gòu)造方式，一一看來。 4.4.1. 憑空變出個 combobox 來。 4.4.2. 把 把 select 變成 combobox 。 4.4.3. 破例討論下 combobox 的內(nèi)在本質(zhì)喲 4.4.4. 嘿嘿 本地的做完了，試試遠程滴。 4.4.5. 給咱們的 combobox 安上零配件 4.4.6. 每次你選擇什么，我都知道 4.4.7. 露一小手，組合上面所知，省市縣三級級聯(lián)。哈哈 這是一個相當?shù)湫偷陌咐?，以前常常?se