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