在Extjs中，在當(dāng)前頁面的grid頁新建了一行數(shù)據(jù)后，通過表單形式進(jìn)入詳細(xì)頁面的編輯，此時(shí)，為了能讓頁面自動(dòng)打開詳細(xì)頁面編輯，我花了三個(gè)小時(shí)，終于找到了在Extjs下最合適的方案，結(jié)果卻只有三句話，我想，這可能也是很多Extjs愛好者們想要知道或者已經(jīng)知道的，為此，將其與大家分享，只求為extjs群體貢獻(xiàn)自己的一些想法。

列表在創(chuàng)建后，一般會(huì)有一個(gè)提示，現(xiàn)在我把我最開始的幾個(gè)思路與大家講講，想直接看結(jié)果的可以跳到最后一套方案~

方案1（放棄）. 在新建數(shù)據(jù)后，向createform方法傳送一個(gè)id值。這可能是普通搞web的大蝦們最先想到的方法，通過傳參給一個(gè)detail頁，然后detail根據(jù)id再到庫中查找相應(yīng)的數(shù)據(jù)，顯示在頁面上?？墒牵?jīng)過調(diào)查，發(fā)現(xiàn)頁面是通過當(dāng)前頁面的子窗口的方式來顯示的，而子窗口的數(shù)據(jù)是通過grid中的每行數(shù)據(jù)來傳入的，如果要想顯示二級(jí)頁，首先要在grid中讀取出一條數(shù)據(jù)，將整體作為一條record傳值才可。而添加數(shù)據(jù)后，本身就是要更新列表的，還不如直接讀取列表中的最新一條數(shù)據(jù)，直接傳入，恩， 這就想到了第二套方案~

方案2（成功）. 在數(shù)據(jù)創(chuàng)建并更新列表后，設(shè)定列表中的第一項(xiàng)（因?yàn)楦鶕?jù)創(chuàng)建時(shí)間排序了的）為選中狀態(tài)，調(diào)用onEdit方法，相當(dāng)于點(diǎn)擊了grid中的第一行數(shù)據(jù)并點(diǎn)編輯按鈕的效果（ps：我是不是很有才呀）。好了，在save數(shù)據(jù)的方法后面，調(diào)用grid.selModel.selectRow(0)，然后grid.onEdit()（自己定義的編輯方法，通過grid.getSelectionModel().getSelected()取出已選的行，并將參數(shù)傳遞給form），要注意了，這里直接選中的話，是選的列表更新前的第一條（不是我們想要的更新后的第一條哦）~~因?yàn)閟tore的load是異步加載的，哈哈，所以這里呢，要把這兩個(gè)方法放到setTimeout函數(shù)里面，像這樣：

設(shè)定一下延遲，然后再執(zhí)行選擇和編輯方法就行啦。有沒有發(fā)現(xiàn)，這里我用的是getCmp，而不是this.grid？因?yàn)閟etTimeout在js中的作用域是全局的，所以如果在這里用了局部變量，js將會(huì)報(bào)錯(cuò)“未定義的對(duì)象或者方法”?？墒?，用的時(shí)候又發(fā)現(xiàn)一個(gè)問題，這個(gè)延遲時(shí)間感覺有點(diǎn)長了，而且，有延遲讓人感覺老是不爽，可不可以不用這個(gè)函數(shù)就搞定呢？于是乎，終極方案即將出爐啦！這是我冥思苦想無果但是無意中發(fā)現(xiàn)的方法哦，嘿嘿，有那么丁點(diǎn)投機(jī)取巧的感覺，大家不要笑我哦，哈哈~
我也是新手，剛學(xué)Extjs沒多久，而且js也不那么熟，估計(jì)擱熟手那，這些小問題都是雞毛蒜皮不當(dāng)回事的，可是我想到這個(gè)后感覺還是挺有成就感的，高手直接略過，就別聽我啰嗦了，呵呵~
方案3（最佳）. 在Extjs的message窗口的回調(diào)函數(shù)中選擇列表并打開詳細(xì)。這就是我的最佳方案。因?yàn)槲野l(fā)現(xiàn)Ext對(duì)Ext.Msg.alert()方法提供了四個(gè)參數(shù)，分別是title,msg,fn,scope（見參考博文）其中，fn就是回調(diào)函數(shù)塊的內(nèi)容，在點(diǎn)擊按鈕后將調(diào)用該函數(shù)，我把上面兩句代碼放在回調(diào)函數(shù)里，就解決了延遲加載和用戶體驗(yàn)的兩大問題，真是兩全其美，何樂而不為呢？

雖然看起來代碼沒幾行，可是卻消耗了我不少腦細(xì)胞啊，為了想出這個(gè)方案，試驗(yàn)并調(diào)試了幾十次，大家如果覺得有用，別忘頂貼哦~
解決問題的過程中，參考了以下博文：
ExtJS Ext.MessageBox.alert()彈出對(duì)話框詳解

最新評(píng)論