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

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

2、一些你做夢(mèng)才能朦朧看到的選擇控件嗎？唉，要是你也像我一樣禁不起誘惑，勸你還是隨著欲望的節(jié)拍，試一下 ext 的 form 和輸入控件。 4.2. 漸漸來，先建一個(gè) form 再說 var form = new ext.form.form( labelalign: right, labelwidth: 50 ); form.add(new ext.form.textfield( fieldlabel: 文本框 ); form.addbutton(按鈕); form.render(form); 簡(jiǎn)潔來說，就是構(gòu)造了一個(gè) form，然后在里邊放一個(gè) textfield，再放一個(gè)按鈕，最終執(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)基本完全不一樣了，咱們先看個(gè)簡(jiǎn)潔例子： 代碼如下： 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 里不需要那么多東西了，只需要定義一個(gè) div id=form就可以實(shí)現(xiàn)這一切。明顯可以感覺到初始配置更緊湊，利用 items 和 buttons 指定包含的控件和按鈕。 現(xiàn)在先感覺一下，我們后面再認(rèn)真討論，例子見 lingo-sample/2.0/04-01

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

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

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