Element.boxWrap convenience tweak - Ext JS

于 2009-04-20 23:28:55 发布 · 79 阅读

文章标签：

#EXT #C #C++ #C#

extJs 专栏收录该内容

281 篇文章

订阅专栏

本文介绍了一种使用ExtJS库进行自定义组件封装的方法，通过创建可复用的“x-box”样式组件来简化UI开发流程。此封装方式允许开发者轻松地为元素添加特定的样式和布局。

Most of the time, the class is going to be "x-box"...

    boxWrap : function(cls){
        var el = Ext.get(this.insertHtml('beforeBegin', String.format('<div class="{0}"><div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div></div>', cls)));
        el.child('.'+cls+'-mc').dom.appendChild(this.dom);
        return el;
    },

    boxWrap : function(cls){
        var c = cls || 'x-box';
        var el = Ext.get(this.insertHtml('beforeBegin', String.format('<div class="{0}"><div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div></div>', c)));
        el.child('.'+c+'-mc').dom.appendChild(this.dom);
        return el;
    },

:?: