拜读了[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree
学习了不少东西,但和自己现用的TreeComboBox比较还是发现有些地方不妥,这里列出来大家探讨一下
1、xiexueze修改的下拉树每次展开时都会加载一次json,我测试的结果,不知道是不是我配置不当造成
2、tree貌似必须从外部传递进来,而tree在扩展内部实现
3、不是问题的问题,扩展定义了很多默认属性,修改了一些底层的方法
现在提出我的代码,其实也是ExtJS2.0的时候从其他地方学过来的,自己修改了一些代码,具体出处已经忘记了,如大家发现了请指出,谢谢
Ext.namespace("Ext.ux.form");
Ext.ux.form.TreeComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent : function(ct, position) {
this.divId = 'tree-' + Ext.id();
if (isNaN(this.maxHeight))
this.maxHeight = 200;
Ext.apply(this, {
tpl : '<tpl>' + '<div style="height:' + this.maxHeight + 'px;">' + '<div id="' + this.divId + '"></div>' + '</div></tpl>'
});
var root = new Ext.tree.AsyncTreeNode({
text : this.rootText,
id : this.rootId,
loader : new Ext.tree.TreeLoader({
dataUrl : this.treeUrl,
clearOnLoad : true
})
});
this.tree = new Ext.tree.TreePanel({
border : false,
root : root,
rootVisible : this.rootVisible,
listeners : {
scope : this,
click : function(node) {
this.setValue(node);
this.collapse();
}
}
});
Ext.ux.form.TreeComboBox.superclass.initComponent.call(this);
},
onRender : function(ct, position) {
Ext.ux.form.TreeComboBox.superclass.onRender.call(this, ct, position);
this.on("expand", function() {
if (!this.tree.rendered) {
this.tree.render(this.divId);
}
}, this)
},
/*以下代码是为了将tree的node设置到combo中 因为我还有一些其他的作用,所以我是将这部分的代码重写到其他地方了
setValue : function(node) {
if (typeof node == "object") {
this.setRawValue(node.text);
if (this.hiddenField) {
this.hiddenField.value = node.id;
}
} else {
this.setRawValue(node);
}
}
*/
});
Ext.reg('uxtreecombobox', Ext.ux.form.TreeComboBox);
之前的setValue我是直接覆盖了combo的方法
Ext.override(Ext.form.ComboBox, {
setValue : function(node) {
if (typeof node == "object") {
// 当node为object对象时 node和tree里面的对应
this.lastSelectionText = node.text;
// 设置显示文本为node的text
this.setRawValue(node.text);
if (this.hiddenField) {
// 设置隐藏值为node的id
this.hiddenField.value = node.id;
}
this.value = node.id;
return this;
} else {
// 当node为文本时 这段代码是从combo的源码中拷贝过来的 具体作用不细说了
var text = node;
if (this.valueField) {
var r = this.findRecord(this.valueField, node);
if (r) {
text = r.data[this.displayField];
} else if (Ext.isDefined(this.valueNotFoundText)) {
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = node;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = node;
return this;
}
}
})
为什么要重写这个方法,请参考Ext.form.ComboBox加载json时刻默认选中的 ...
下面是使用的代码
xtype : 'uxtreecombobox',
id : 'Ext.Strong.tyh.combo.yhBmid',
hiddenName : 'yhBmid',
fieldLabel : '${action.getText("YH_BM")}',
editable : false,
shadow : true,
maxHeight : 200,
mode : 'local',
displayField : 'text',
valueField : 'id',
triggerAction : 'all',
allowBlank : false,
treeUrl : '<@s.url action="tbm_Shu_XianShi!json"/>',
rootText : 'root',
rootId : '0',
// api里面的意思是
//【true to restrict the selected value to one of the values in the list, false to allow the user to set arbitrary text into the field (defaults to false)】
// 我的理解是combo中设置的值
// 能否为不在store中的内容
// 因为如果默认设置为false的时候每次在失去该combo对象的焦点时刻会触发一个事件重新设置一下value
// 这个问题我解决了好久才搞定
forceSelection : true,
rootVisible : false
为什么forceSelection : true,我们看一下源代码
beforeBlur : function(){
var val = this.getRawValue(),
rec = this.findRecord(this.displayField, val);
// 注意这里 如果rec不存在且forceSelection为true
if(!rec && this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
if(rec){
val = rec.get(this.valueField || this.displayField);
}
this.setValue(val);
}
},
总结一下,ExtJS的确实存在很多陷阱,很多简单的应用都必须从底层去解决,但是也提供了很好的学习机会,ExtJS的代码很多地方都值得我们去认真学习
分享到:
相关推荐
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
ExtJS4下拉树组件 ExtJS4下拉树组件
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
extjs下拉树
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
简单的修改下Extjs 的引用路径 双击Index.html 就可以看到效果了。
extjs下拉树,在网上找了很多,发现bug实在让人头大,干脆自己写了个下拉树组件,功能全面
Extjs 下拉列表
使用方法: var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true ...
extjs 树形下拉列表框,可以进行数据选择,数据回显。
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
自定义下拉树,你懂的,内附图和前后台源代码
Extjs4多选树,支持多选和单选,能够实现默认值选中,数据存放在json,里面有明确的提示信息。很适合初学者借鉴学习
NULL 博文链接:https://lpcjrflsa.iteye.com/blog/1704537
此处做一个extjs下拉列,以备后用。该项目中包涵使用说明,将项目下载下来按照使用说明即可。 本人也是extjs的初学者,有不足之处希望使用该资源的兄弟姐妹指出,希望对大家有帮助。
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
NULL 博文链接:https://init-since.iteye.com/blog/2095766
功能:extjs4 下拉菜单树 combobox+tree 支持单选多选等 收集两款,仅需要1分。