Ext.NET Ext.JS 常用代码片段摘录

引言

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

正文

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]

巴特西

Ext.NET Ext.JS 常用代码片段摘录

引言

正文

题外话

最新文章

热门文章