引言

• 最近寫代碼突然有"一把梭"的感覺, 不管三七二十一先弄上再說. 換別人的說法, 這應(yīng)該是屬于"做項目"風(fēng)格法吧. 至于知識體系, 可以參考官方或者更權(quán)威的文檔吧. 這里按照使用, 在這個理解階段記錄下代碼, 供參考. 適當(dāng)做一些拓展, 應(yīng)該比較適合特定階段的感悟. 如果難懂, 可能還沒用到過. 心得這東西跟武學(xué)一個道理, 一層有一層的見識. 如果完整, 百科全書式, 官方文檔 , 牛人解讀體系最靠譜. 此處, 一把梭演示法, 用起來再說.

正文

• 1. TreePanel查詢以及只展開第一層, 對于TreePanel內(nèi)TreeGrid, TreeStore這種數(shù)據(jù)類型計較Grid有區(qū)別, 算比較重型復(fù)雜的Ext控件, 也算用的很多, 能滿足絕大多數(shù)場景了, 還有情況就是多考慮控件演示 發(fā)現(xiàn)Ext界面多想著單一控件實現(xiàn), 在一個Panel組合. 而不是多想多個控件組合一個控件去用, 這思路目前得變. 一直想自定義控件, 組合各種. 其實不然, 重型控件是多配置, 多修, 而不是庖丁解牛, 創(chuàng)造牛丸

var FnGridPanel1 = function () {
    App.tplLabourSer.store.proxy.setExtraParam("SearchOrgID", App.ddfOrgNameId.getValue());
    App.btnOk.setDisabled(true);
    App.tplLabourSer.getRootNode().reload({
    callback: function (records, operation, success) {
        if (success) {
            App.tplLabourSer.getRootNode().expand();
            App.tplLabourSer.store.proxy.setExtraParam("SearchOrgID", "");
            App.btnOk.setDisabled(false);
        }
    }
});
};

• 2.Panel FormPanel內(nèi)下拉框數(shù)據(jù)處理加載處理,, 解決value有,但是界面不顯示值的問題, 這個辦法就通用了. 對combobox 控件來個手動刷新.

var initComboxByValue = function (comb) {
    var value = comb.getValue();
    comb.setSelectedItems({ value: value });
}

var combs = App.frmDetail.queryBy(function (item) {
    return item.getXType() == 'combobox';
})
Ext.Array.each(combs, function (item) {
    initComboxByValue(item);
});

• 3.設(shè)置Panel內(nèi)全部組件, 重點(diǎn)是獲取

function setReadOnlyForAll(form, readOnly) {
    Ext.suspendLayouts();
    form.getForm().getFields().each(function (field) {
        field.setReadOnly(readOnly);
    });
    Ext.resumeLayouts();
}

• 4.獲得當(dāng)前選擇行內(nèi)容, 適用于GirdPanel及TreePanel, 對于Grid更多的是關(guān)注store, record這樣的概念. 對于Tree, 則要關(guān)注node這種, 再這樣的概念上 有更多的內(nèi)容, 具體目前還是需要什么, 界面實際顯示為主.

function getSelectNodeId() {
    var items = App.tplLabourSer.selModel.selected.items;
    if (items.length > 0) {
        return items[0].data.id;
    }
    return '';
}
// grid取到行的值方式.  多考慮record的概念
App.gpSettleOtherDtl.store.data.items[0]
App.gpSettleOtherDtl.store.data.items[0].data 
App.gpSettleOtherDtl.store.data.items[0].raw
// tree取node概念, 多考慮node概念
  // 這里getView()獲得當(dāng)前已展開節(jié)點(diǎn), 所以數(shù)量一直在變, 要獲得具體的值, 通過`selectPath()` 方式選擇
App.tplLabourSer.getView().store.data.items[123].getPath();
App.tplLabourSer.selectPath('/root/00000000-0000-0000-00000001498723179/F93F5465-CC34-4A08-913A-D29EA100B922')
//獲取節(jié)點(diǎn)方式.
var m = App.tplLabourSer.getRootNode()
m.childNodes
m.childNodes[0].data

• 5.Treepanel保存一行之后更新庫然后需要刷新前臺頁面, 然后全局刷新后選擇到上一次的行. 可以使用如上, getPath()``selectPaht(..) 方式來獲取更新. 通過 App.tplLabourSer.selModel.getLastSelected() 對于Grid無緩存可能有些用, 但是對于Node有緩存, 或者有二次展開, 導(dǎo)致得到的Selected 實際上 是空的, 采用如下方式解決了這個問題, 其中pnode, 是展開具體節(jié)點(diǎn), 對于手動二次展開是有用的.

<ext:TreeStore runat="server" ID="mainStore" AutoLoad="false">
    <Proxy>
    </Proxy>
    <Parameters>                          
        <ext:StoreParameter Name="IsContainOver" Value="App.IsContainOver.getValue()" Mode="Raw"> ....
        </ext:StoreParameter>
    </Parameters>
    <Listeners>                            
        <Load Handler="SetSpecNode(App.tplLabourSer,node,App.hdLabourID.getValue())" />
    </Listeners>
</ext:TreeStore>

function SetSpecNode(tree, pnode, laborID) {
    if (!pnode) return;
    var hasFinded = false;
    pnode.childNodes.forEach(function (item) {
        if (item.data.leaf) {
            if (item.data.LabourSerRanksID == laborID) {
                hasFinded = true;
                tree.selModel.select(item);
                item.expand(false);
                return;
            }
        }
    });
    if (!hasFinded) {
        var node = pnode.childNodes[0];
        tree.selModel.select(node);
        node.expand(false);
    } 
}

題外話

• 茴香豆的三種寫法
• 對于GridView 和TreeView 應(yīng)該算Ext中最多使用的部分了, 想完整歸納, 發(fā)現(xiàn)比較困難. 要么不如官方的好, 要么不知從哪下手, 如上算是代碼摘錄部分. 思想就是item , record, node究竟是哪個. 人家設(shè)計方式和體系沒搞懂之前, 按照"做項目" 的野路子, 總結(jié)一些常用用法, 習(xí)慣嘛. 其他再說, 再慢慢領(lǐng)悟.
• 譬如對于用法, 如下三條獲得的是一樣的. 但是思路不同. 通過getXXX()方法和selected.items, getSelection() 得到相應(yīng)地內(nèi)容. 非常值得研究Ext 體系的例子.

App.gpContract.selModel.selected.items[0]
App.gpContract.selModel.getSelection()[0]
App.gpContract.getView().getSelectionModel().getSelection()[0]