glimis / ext Goto Github PK

//js
Ext.create("Ext.Component", {
    renderTo: "test"
})

Ext.create("Ext.Component", {
    renderTo: "test",
    autoEl:{
         tag: 'p'
    }
})

Ext.create("Ext.Component", {
    renderTo: "test",
    autoEl:{
         tag: 'abc',
         html:'123'
    }
})

var btn=Ext.create("Ext.button.Button", {
    renderTo: "test",
})

var btn=Ext.create("Ext.button.Button", {
    renderTo: "test",
})
console.log(btn.btnWrap);
console.log(btn.btnEl);
console.log(btn.btnIconEl);
console.log(btn.btnInnerEl);

    renderTpl:
        '<span id="{id}-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="{btnWrapStyle}" ' +
                'class="{btnWrapCls} {btnWrapCls}-{ui} {splitCls}{childElCls}">' +
            '<span id="{id}-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="{btnElStyle}" ' +
                    'class="{btnCls} {btnCls}-{ui} {textCls} {noTextCls} {hasIconCls} ' +
                    '{iconAlignCls} {textAlignCls} {btnElAutoHeightCls}{childElCls}">' +
                '<tpl if="iconBeforeText">{[values.$comp.renderIcon(values)]}</tpl>' +
                '<span id="{id}-btnInnerEl" data-ref="btnInnerEl" role="presentation" unselectable="on" ' +
                    'class="{innerCls} {innerCls}-{ui}{childElCls}">{text}</span>' +
                '<tpl if="!iconBeforeText">{[values.$comp.renderIcon(values)]}</tpl>' +
            '</span>' +
        '</span>' +
        '{[values.$comp.getAfterMarkup ? values.$comp.getAfterMarkup(values) : ""]}' +
        // if "closable" (tab) add a close element icon
        '<tpl if="closable">' +
            '<span id="{id}-closeEl" data-ref="closeEl" role="presentation"' +
                ' class="{baseCls}-close-btn"' +
                '<tpl if="closeText">' +
                    ' title="{closeText}" aria-label="{closeText}"' +
                '</tpl>' +
                '>' +
            '</span>' +
        '</tpl>',

    iconTpl:
        '<span id="{id}-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="{baseIconCls} ' +
                '{baseIconCls}-{ui} {iconCls} {glyphCls}{childElCls}" style="' +
            '<tpl if="iconUrl">background-image:url({iconUrl});</tpl>' +
            '<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">' +
            '<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl">&#160;</tpl>' +
        '</span>',
    renderIcon: function(values) {
        return this.getTpl('iconTpl').apply(values);
    },
    childEls: [
        'btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl'
    ],

 setIcon: function(icon) {
        icon = icon || '';
        var me = this,
            btnIconEl = me.btnIconEl,
            oldIcon = me.icon || '';

        me.icon = icon;
        if (icon != oldIcon) {
            if (btnIconEl) {
                btnIconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
                me._syncHasIconCls();
                if (me.didIconStateChange(oldIcon, icon)) {
                    me.updateLayout();
                }
            }
            me.fireEvent('iconchange', me, oldIcon, icon);
        }
        return me;
    },
    setIconCls: function(cls) {
        cls = cls || '';
        var me = this,
            btnIconEl = me.btnIconEl,
            oldCls = me.iconCls || '';

        me.iconCls = cls;
        if (oldCls != cls) {
            if (btnIconEl) {
                // Remove the previous iconCls from the button
                btnIconEl.removeCls(oldCls);
                btnIconEl.addCls(cls);
                me._syncHasIconCls();
                if (me.didIconStateChange(oldCls, cls)) {
                    me.updateLayout();
                }
            }
            me.fireEvent('iconchange', me, oldCls, cls);
        }
        return me;
    },

Ext.create("Ext.Component", {
    renderTo: Ext.getBody(),
    html: "&nbsp;  <a>hello world</a>"
})    

<script id='test' type='template'>
    <ul>
        <li><span>姓名:张三</span></li>
        <li><span>性别:男</span></li>
    </ul>
</script>
<script>
var html=document.getElementById('test').innerHTML;
</script>

//js
 Ext.create("Ext.Component", {
    renderTo: "test",
    contentEl: "template"
})

var data = {
    name: '张三',
    sex: '男'
}
var template = document.getElementById('test').innerHTML;
var html = template.replace(/<%=([^>]*)%>/g, function(code, key) {
    return data[key];
});

    var data = {
        student: [{
            name: '张三',
            sex: '男'
        }, {
            name: '李四',
            sex: '女'
        }]
    }
    var template = document.getElementById('test').innerHTML;
    var code = ['var t=[];'];
    //截取分割符,拼接js
    var codes = template.split(/<%|%>/g);
    for (var i = 0; i < codes.length; i++) {
        var c = codes[i];
        if (c.match(/for|if|else|}/)) {
            //如果为逻辑,直接添加用于执行
            code.push(c);
        } else {
            //如果为结构,放入数组中,用于展示
            if (c[0] == '=') {
                //包含＝不带",用于关联数据
                code.push('t.push(' + c.substr(1) + ');');
            } else {
                //不包含＝不带",用于添加结构
                code.push('t.push("' + c + '");');
            }
        }
    }
    code.push('return t.join("");');
    var htmljs = code.join('').replace(/[\r\t\n]/g, '');
    var html = new Function('data', htmljs)(data);

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="age &gt; 1">',  // 注意 要被编码
            '<p>{#}: {name}</p>',  // 每一项的自动编号
            '<p>In 5 Years: {age+5}</p>',  // 基础数学
            '<p>Dad: {parent.name}</p>',
        '</tpl>',
    '</tpl></p>'
);
tpl.overwrite('test',{
    name: 'Don Griffin',
    kids: [
        { name: 'Aubrey',  age: 17 },
        { name: 'Nikol',   age: 5 }
    ]
});

Ext.create("Ext.Component", {
    renderTo:Ext.getBody(),
    "tpl":["<p>Name: {name}</p>",
        "<p>Kids: ",
        "<tpl for='kids'>",
        "<tpl if='age &gt; 1'>", 
        "<p>{#}: {name}</p>", 
        "<p>In 5 Years: {age+5}</p>",
        "<p>Dad: {parent.name}</p>",
        "</tpl>",
        "</tpl></p>"
    ],
    "data": {
        name: "Don Griffin",
          kids: [
        { name: 'Aubrey',  age: 17 },
        { name: 'Nikol',   age: 5 }
    ]
    }
})

var cmp=Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 class="title">{title}</h1>',
        '<p>{desc}</p>'
    ],
    renderData: {
        title: "Error",
        desc: "Something went wrong"
    },
    renderSelectors: {
        titleEl: 'h1.title',
        descEl: 'p'
    }
});
cmp.titleEl.setStyle({color: "red"});

var cmp=Ext.create("Ext.Component", {
    renderTo:'test',
    "childEls": ["titleEl"],
      renderData: {
        title: "Error",
        desc: "Something went wrong"
    },
        renderTpl: [
        '<h1 id="{id}-titleEl" data-ref="titleEl" class="title">{title}</h1>',
        '<p>{desc}</p>'
    ]
})

cmp.titleEl.setStyle({color: "red"});

Ext.define('Ext.panel.Panel', {
    extend: 'Ext.container.Container',
    childEls: [
        'body'
    ],
    renderTpl: [
        '{% this.renderDockedItems(out,values,0); %}',
        '<div id="{id}-body" data-ref="body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
            ' {baseCls}-body-{ui}<tpl if="uiCls">',
                '<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
            '</tpl>{childElCls}"',
            '<tpl if="bodyRole"> role="{bodyRole}"<tpl else> role="presentation"</tpl>',
            '<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
            '{%this.renderContainer(out,values);%}',
        '</div>',
        '{% this.renderDockedItems(out,values,1); %}'
    ]
}

function Student(){
}

function Student(name){
    this.name=name;
}
Student.prototype.getName=function(){
    return this.name;
}

function A(){}
A.prototype.a=function(){return 'a'};
function B(){}
B.prototype.b=function(){return 'b'};

function A(){}
A.prototype.a=function(){return 'a'};
function B(){}
B.prototype=new A();
B.prototype.b=function(){return 'b'};

function A(){}
A.prototype.a=function(){return 'a'};
function B(){
    A.call(this,arguments);
}
B.prototype=new A();
B.prototype.b=function(){return 'b'};

function Component(selector){
    this.selector=selector;
    this.render();
}

Component.prototype.html="<div>组件对象</div>";

Component.prototype.render=function(){
    document.getElementById(this.selector).innerHTML=this.html;
}

var util = require('util');
var Component = require('./Component');
function Button() {
    Component.apply(this, arguments);
}
util.inherits(Button, Component);
Button.prototype.html="<button>按钮对象</button>";

Ext.define('A', {
     a:function(){return 'a'}
 });
 var a=new A();
 console.log(a.a);

Ext.define('B', {
    extend: 'A',
    b: function() {
        return 'b'
    }
});
var a=new B();
console.log(a.a());
console.log(a.b());

Ext.define('A', {
    constructor:function(){
        console.log('create a')
    },
    a:function(){return 'a'}
 });

Ext.define('B', {
    extend: 'A',
    constructor:function(){
        console.log('create b')
    },
    b: function() {
        return 'b'
    }
});
new A();
new B();

Ext.define('B', {
    extend: 'A',
    constructor:function(){
        console.log('create b');
        this.callParent(arguments);
    },
    b: function() {
        return 'b'
    }
});

function A(){}
A.prototype.a=function(){return 'a'};
A.b='b';

Ext.define('A', {
    a: function() {
        return 'a'
    },
    statics: {
        b: 'b'
    }
});
console.log(A.b);

var util = require('util');
var Component = require('./Component');
function Button() {
    Component.apply(this, arguments);
}
util.inherits(Button, Component);
Button.prototype.html="<button>按钮对象</button>";

Ext.define('A2', {
    requires: [
        'A'
    ]
})

Ext.define('A', function(){
    var count=1;
    return {
        a: function() {
            return count++;
        }
    }
});
new A().a();
new A().a();
new A().a();

Ext.define('A', {
    a: 1
});

var a = new A();
console.log(a.a);

Ext.define('My.ux.Addb', {
    override: 'A',
    b: 2
});
console.log(a.b);

Ext.define('My.ux.Edita', {
    override: 'A',
    a:123
});
console.log(a.a)

Ext.define('A', {
    requires:['My.ux.Addb'],
    a: 1
});

    constructor: function(config) {
        var me = this,
            i, len, xhooks, controller;

        config = config || {};
        if (config.initialConfig) {

            // Being initialized from an Ext.Action instance...
            if (config.isAction) {
                me.baseAction = config;
            }
            config = config.initialConfig;
            // component cloning / action set up
        }
        else if (config.tagName || config.dom || Ext.isString(config)) {
            // element object
            config = {
                applyTo: config,
                id: config.id || config
            };
        }

        // Make initialConfig available early so that config getters may access it
        me.initialConfig = config;

        // Ensure that we have an id early so that config getters may access it
        me.getId();
        me.protoEl = new Ext.util.ProtoElement();
        me.initConfig(config);

        xhooks = me.xhooks;
        if (xhooks) {
            delete me.xhooks;
            Ext.override(me, xhooks);
        }

        me.mixins.elementCt.constructor.call(me);

        //<debug>
        if (!me.validIdRe.test(me.id)) {
            Ext.Error.raise('Invalid component "id": "' + me.id + '"');
        }
        if (!me.validIdRe.test(me.itemId)) {
            Ext.Error.raise('Invalid component "itemId": "' + me.itemId + '"');
        }
        //</debug>

        me.setupProtoEl();

        // initComponent, beforeRender, or event handlers may have set the style or `cls` property since the `protoEl` was set up
        // so we must apply styles and classes here too.
        if (me.cls) {
            me.initialCls = me.cls;
            me.protoEl.addCls(me.cls);
        }
        if (me.style) {
            me.initialStyle = me.style;
            me.protoEl.setStyle(me.style);
        }

        me.renderData = me.renderData || {};

        me.initComponent();

        // initComponent gets a chance to change the id property before registering
        if (!me.preventRegister) {
            Ext.ComponentManager.register(me);
        }

        me.mixins.state.constructor.call(me);
        me.addStateEvents('resize');

        controller = me.getController();
        if (controller) {
            controller.init(me);
        }

        // Move this into Observable?
        if (me.plugins) {
            for (i = 0, len = me.plugins.length; i < len; i++) {
                me.plugins[i] = me.initPlugin(me.plugins[i]);
            }
        }

        me.loader = me.getLoader();

        if (me.renderTo) {
            me.render(me.renderTo);
            // EXTJSIV-1935 - should be a way to do afterShow or something, but that
            // won't work. Likewise, rendering hidden and then showing (w/autoShow) has
            // implications to afterRender so we cannot do that.
        }

        // Auto show only works unilaterally on *uncontained* Components.
        // If contained, then it is the Container's responsibility to do the showing at next layout time.
        if (me.autoShow && !me.initOwnerCt) {
            me.show();
        }

        //<debug>
        if (Ext.isDefined(me.disabledClass)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
            }
            me.disabledCls = me.disabledClass;
            delete me.disabledClass;
        }
        //</debug>

        // If we were configured from an instance of Ext.Action, (or configured with a baseAction option),
        // register this Component as one of its items
        if (me.baseAction){
            me.baseAction.addComponent(me);
        }
    },
    initComponent: function () {
        var me = this,
            width = me.width,
            height = me.height;

        // If plugins have been added by a subclass's initComponent before calling up to here (or any components
        // that don't have a table view), the processed flag will not have been set, and we must process them again.
        if (me.plugins && !me.plugins.processed) {
            me.plugins = me.constructPlugins();
        }

        // this will properly (ignore or) constrain the configured width/height to their
        // min/max values for consistency.
        if (width != null || height != null) {
            me.setSize(width, height);
        }

        if (me.listeners) {
            me.on(me.listeners);
            me.listeners = null; //change the value to remove any on prototype
        }
    },