Ext 前台代码集锦

引言

• 最近写代码突然有"一把梭"的感觉, 不管三七二十一先弄上再说. 换别人的说法, 这应该是属于"做项目"风格法吧. 至于知识体系, 可以参考官方或者更权威的文档吧. 这里按照使用, 在这个理解阶段记录下代码, 供参考. 适当做一些拓展, 应该比较适合特定阶段的感悟. 如果难懂, 可能还没用到过. 心得这东西跟武学一个道理, 一层有一层的见识. 如果完整, 百科全书式, 官方文档 , 牛人解读体系最靠谱. 此处, 一把梭演示法, 用起来再说.

正文

• 1. TreePanel查询以及只展开第一层, 对于TreePanel内TreeGrid, TreeStore这种数据类型计较Grid有区别, 算比较重型复杂的Ext控件, 也算用的很多, 能满足绝大多数场景了, 还有情况就是多考虑控件演示 发现Ext界面多想着单一控件实现, 在一个Panel组合. 而不是多想多个控件组合一个控件去用, 这思路目前得变. 一直想自定义控件, 组合各种. 其实不然, 重型控件是多配置, 多修, 而不是庖丁解牛, 创造牛丸

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内下拉框数据处理加载处理,, 解决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.设置Panel内全部组件, 重点是获取

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

• 4.获得当前选择行内容, 适用于GirdPanel及TreePanel, 对于Grid更多的是关注store, record这样的概念. 对于Tree, 则要关注node这种, 再这样的概念上 有更多的内容, 具体目前还是需要什么, 界面实际显示为主.

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()获得当前已展开节点, 所以数量一直在变, 要获得具体的值, 通过`selectPath()` 方式选择
App.tplLabourSer.getView().store.data.items[123].getPath();
App.tplLabourSer.selectPath('/root/00000000-0000-0000-00000001498723179/F93F5465-CC34-4A08-913A-D29EA100B922')
//获取节点方式.
var m = App.tplLabourSer.getRootNode()
m.childNodes
m.childNodes[0].data

• 5.Treepanel保存一行之后更新库然后需要刷新前台页面, 然后全局刷新后选择到上一次的行. 可以使用如上, getPath()``selectPaht(..) 方式来获取更新. 通过 App.tplLabourSer.selModel.getLastSelected() 对于Grid无缓存可能有些用, 但是对于Node有缓存, 或者有二次展开, 导致得到的Selected 实际上 是空的, 采用如下方式解决了这个问题, 其中pnode, 是展开具体节点, 对于手动二次展开是有用的.

<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 应该算Ext中最多使用的部分了, 想完整归纳, 发现比较困难. 要么不如官方的好, 要么不知从哪下手, 如上算是代码摘录部分. 思想就是item , record, node究竟是哪个. 人家设计方式和体系没搞懂之前, 按照"做项目" 的野路子, 总结一些常用用法, 习惯嘛. 其他再说, 再慢慢领悟.
• 譬如对于用法, 如下三条获得的是一样的. 但是思路不同. 通过getXXX()方法和selected.items, getSelection() 得到相应地内容. 非常值得研究Ext 体系的例子.

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