OU - 极湖 - Posts tagged by "".

Posts tagged with "extjs"

给 ExtJS 的输入控件增加提示功能

Wednesday, 9. September 2009, 05:37:11

在页面的 js 代码最上层，追加以下代码

Ext.override(Ext.form.Field, {
    afterRender: function() {
        this.initEvents();
        this.initValue();
        //取得控件的标签
        var findLabel = function(field) {
            var wrapDiv = null;
            var label = null
            wrapDiv = field.getEl().up('div.x-form-element');
            if(wrapDiv) {
                label = wrapDiv.child('label');        
                if(label) {
                    return label;
                }
            }
            wrapDiv = field.getEl().up('div.x-form-item');
            if(wrapDiv) {
                label = wrapDiv.child('label');        
            }
            return label;
        }
        //给控件追加 QuickTips
        if(this.qtip) {
            Ext.QuickTips.register({
                target: this.getEl(),
                title: '',
                text: this.qtip,
                enabled: true
            });
            var label = findLabel(this);
            if(label) {
                Ext.QuickTips.register({
                    target: label,
                    title: '',
                    text: this.qtip,
                    enabled: true
                });
            }
        }
        Ext.form.Field.superclass.afterRender.call(this);
    }
});

之后，在生成输入控件的代码中，若有以下属性
qtip: '提示消息'

当鼠标移动到控件上面，提示文字就会显示。

参考： http://www.yui-ext.com/forum/showthread.php?t=11537

No comments

今天去 extjs.com 转了转，发现 ExtJS 3.0 已经正式释出。新版本发布的动静似乎很小，若不是首页上的这行字： Make an impact: Ext Js 3.0 is here ，我还看不出发布的样子。刚开始还不能确认是否正式发布，转到到下载页面，看到 Ext Js 3.0.0 后面有这行字：Released on July 6th, 2009. 才确信。

从今以后，就用这个版本了。

No comments

ExtJS: 深度查找树节点

Wednesday, 10. June 2009, 01:24:37

JavaScript, function, extjs

方法一：自己做递归函数

function findChildRecursively(rootNode, key, value) {
    var nodes = rootNode.childNodes;
    for(var i = 0; i < nodes.length; i++) {
        if(nodes[i].attributes[key] == value){
            return nodes[i];
        } else {
            if(!nodes[i].isLeaf()) {
                // 查找结果不包含 Folder 的情况下
                continue;
            }
            if(!nodes[i].isLoaded()) {
                //加载子节点，AsyncTreeNode 需要，TreeNode 则不需
                nodes[i].reload();
            }
            if(node = findChildRecursively(nodes[i], key, value)) {
                return node;
            }
        }
    }
    return null;
}

方法二：利用现成方法 cascade

var node = null;
rootNode.cascade(function(n) {
    if(n.isLeaf() && !n.isLoaded()) {
        n.reload();
        return true;
    }
    if(n.attributes[key] == value) {
        node = n;
        return false;
    }
    return true;
});

No comments

利用 jQuery 克隆 Object

Thursday, 9. April 2009, 00:49:03

jQuery, extjs, JavaScript

在网上搜索关键字 “javascript object clone”，可以找到很多实现克隆 Object 的代码，可是据我测试，让人满意的几乎没有。

今天发现 jQuery 的作者 John Resig 给别人的答复，尝试了一下确实很好用。

方法如下：

// 浅层复制（只复制顶层的非 object 元素）
var newObject = jQuery.extend({}, oldObject);

// 深层复制（一层一层往下复制直到最底层）
var newObject = jQuery.extend(true, {}, oldObject);

测试如下：

var obj1 = {
  'a': 's1',
  'b': [1,2,3,{'a':'s2'}],
  'c': {'a':'s3', 'b': [4,5,6]}
}

var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;

console.log(obj1);
console.log(obj2);

obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。

ExtJS 也有类似的方法 Ext.apply，因此单独用 ExtJS 应该也能实现同样的功能。

No comments

ExtJS 控件扩展：带清空功能的 ComboBox

Friday, 6. March 2009, 07:57:35

extjs, JavaScript

在 ExtJS 官方网的论坛上找到的代码，稍稍改动之后如下：

/*
 * 带清空功能的 ComboBox
*/
Ext.form.ClearableComboBox = Ext.extend(Ext.form.ComboBox, {
    initComponent: function(){
        Ext.form.ClearableComboBox.superclass.initComponent.call(this);
        this.addEvents('clear');
        
        this.triggerConfig = {
            tag:'span',
            cls:'x-form-twin-triggers',
            style:'padding-right:2px',
            cn:[
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger"},
                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger x-form-clear-trigger"}
            ]
        };
    },

    getTrigger: function(index){
        return this.triggers[index];
    },

    initTrigger: function(){
        var ts = this.trigger.select('.x-form-trigger', true);
        this.wrap.setStyle('overflow', 'hidden');
        var triggerField = this;
        ts.each(function(t, all, index){
            t.hide = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = 'none';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            t.show = function(){
                var w = triggerField.wrap.getWidth();
                this.dom.style.display = '';
                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
            };
            var triggerIndex = 'Trigger'+(index+1);

            if(this['hide'+triggerIndex]){
                t.dom.style.display = 'none';
            }
            t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
            t.addClassOnOver('x-form-trigger-over');
            t.addClassOnClick('x-form-trigger-click');
        }, this);
        this.triggers = ts.elements;
    },

    onTrigger1Click: function() {this.onTriggerClick()},
    onTrigger2Click: function() {this.clearValue(); this.fireEvent('clear', this)}
});

No comments