收藏Extjs组件comboxTree

最新推荐文章于 2020-12-23 08:22:13 发布

黑暗行动

最新推荐文章于 2020-12-23 08:22:13 发布

阅读量494

点赞数

分类专栏： EXT JS

本文链接：https://blog.csdn.net/chy2z/article/details/80080284

版权

EXT JS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

TreeComboField.js 代码：

Ext.namespace("Ext.tet");
Ext.tet.TreeComboField = Ext.extend(Ext.form.TriggerField, {
    valueField : "Id",
    displayField : "Name",
    haveShow : false,
    editable : false,
    onTriggerClick : function() {
        if (!this.tree.rendered) {
            this.treeId = Ext.id();
            var panel = document.createElement('div');
            panel.style.backgroundColor='#ffffff';
            panel.id = this.treeId;
            this.getEl().dom.parentNode.appendChild(panel);
            this.tree.render(this.treeId);
            this.tree.setWidth(this.width);
            this.tree.getEl().alignTo(this.getEl(), "tl-bl");
        }
        this.tree.show();
    },
    initComponent : function() {
        Ext.tet.TreeComboField.superclass.initComponent.call(this);
    },
    onRender : function(ct, position) {
        Ext.tet.TreeComboField.superclass.onRender.call(this, ct, position);
        this.tree.on("click", this.choice, this);
        //this.tree.on("dblclick",function(){this.tree.hide();},this);
        if (this.hiddenName) {
            this.hiddenField = this.el.insertSibling({
                tag : 'input',
                type : 'hidden',
                name : this.hiddenName,
                id : (this.hiddenId || this.hiddenName)
            }, 'before', true);
            this.hiddenField.value = this.hiddenValue !== undefined ? this.hiddenValue : this.value !== undefined ? this.value : '';
            this.el.dom.removeAttribute('name');
        }
        if (!this.editable) {
            this.editable = true;
            this.setEditable(false);
        }
    },
    getValue : function() {
        return typeof this.value != 'undefined' ? this.value : '';
    },
    clearValue : function() {
        if (this.hiddenField) {
            this.hiddenField.value = '';
        }
        this.setRawValue('');
        this.lastSelectionText = '';
        this.applyEmptyText();
    },
    readPropertyValue : function(obj, p) {
        var v = null;
        for (var o in obj) {
            if (o == p)
                v = obj[o];
        }
        return v;
    },
    setValue : function(obj) {
        if (!obj) {
            this.clearValue();
            return;
        }
        var v = obj;
        var text = v;
        var value = this.valueField || this.displayField;
        if (typeof v == "object" && this.readPropertyValue(obj, value)) {
            text = obj[this.displayField || this.valueField];
            v = obj[value];
        }
        var node = this.tree.getNodeById(v);
        if (node) {
            text = node.text;
        } else if (this.valueNotFoundText !== undefined) {
            text = this.valueNotFoundText;
        }
        this.lastSelectionText = text;
        if (this.hiddenField) {
            this.hiddenField.value = v;
        }
        Ext.tet.TreeComboField.superclass.setValue.call(this, text);
        this.value = v;
    },
    setEditable : function(value) {
        if (value == this.editable) {
            return;
        }
        this.editable = value;
        if (!value) {
            this.el.dom.setAttribute('readOnly', true);
            this.el.on('mousedown', this.onTriggerClick, this);
            this.el.addClass('x-combo-noedit');
        } else {
            this.el.dom.setAttribute('readOnly', false);
            this.el.un('mousedown', this.onTriggerClick, this);
            this.el.removeClass('x-combo-noedit');
        }
    },
    choice : function(node, eventObject) {
        if (node.id != "root")
            this.setValue(node.id);
        else
            this.clearValue();
        this.tree.hide();
    },
    onDestroy : function() {
        if (this.tree.rendered) {
            this.tree.getEl().remove();
        }
        Ext.tet.TreeComboField.superclass.onDestroy.call(this);
    }
});

Ext.reg('treecombo', Ext.tet.TreeComboField);

调用代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Client/Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../Client/Ext/ext-all.js"></script>
<script type="text/javascript" src="TreeComboField.js"></script>
</head>
<script>
Ext.onReady(function(){

Ext.BLANK_IMAGE_URL="../../Client/Images/s.gif";

Ext.QuickTips.init();

var tree = new Ext.tree.TreePanel({
});

var treeCombox = new Ext.tet.TreeComboField({fieldLabel:"请选择",anchor:"97%",tree:tree});

new Ext.form.FormPanel({
        title:"测试",
        frame: true,
        width:400,
        items:[treeCombox],
        buttons:[{text:"test",handler:function(){

                              }
        }],
        renderTo: 'form'
});

});
</script>
<body bgcolor=white>
<div id="form" style="margin:20px;"></div>
</body>
</html>

黑暗行动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
收藏Extjs组件comboxTree

TreeComboField.js 代码： Ext.namespace("Ext.tet");Ext.tet.TreeComboField = Ext.extend(Ext.form.TriggerField, { valueField : "Id", displayField : "Name", haveShow : false, editable : false,
复制链接

扫一扫

专栏目录