ExtJS3 Component

Ext.ns("Application");
Application = function(config){
    Ext.apply(config);
};
Ext.onReady(function(){
    var box1 = new Ext.BoxComponent({
        html:'This is a BoxComponent'
    });
    box1.render('box1');
    var box2 = new Ext.BoxComponent({
        html:'This is a BoxComponent',
        autoEl:'blockqutoe'
    });
    box2.render('box2');
       
    //applyTo和renderTo
    //applyTo会清除目标节点,然后添加到目标节点的父节点
    //renderTo直接作为目标节点的子节点
       
    var imageBox = new Ext.BoxComponent({
        autoEl:{
            tag:'img',
            src:'help.png'
        }
           
    });
       
    var setColorHandler = function(item, checked){
        if(checked){
            Ext.Msg.alert('您选择的颜色', item.text);
        }
    };
       
    var panel = new Ext.Panel({
        title:'BoxComponent',
        frame:true,
        width:300,
        //renderTo:Ext.getBody(),
        items:[
            imageBox,
            new Ext.ColorPalette({
                value:'000000',
                listeners:{
                    select:function(palette, selectedColor){
                        Ext.Msg.alert('您选择的颜色', selectedColor);
                    }
                }
            }),
            new Ext.SplitButton({
                text:'颜色',
                menu:{
                    defaults:{
                        checked:false,
                        group:'colorGroup',
                        checkHandler:setColorHandler
                    },
                    items:[{
                        text:'红色'
                    },{
                        text:'绿色'
                    },{
                        text:'蓝色'
                    }]
                }
            }),
            new Ext.menu.Menu({
                width:200,
                floating:false,
                items:[
                    new Ext.menu.BaseItem({html:'File'}),
                    new Ext.menu.TextItem({text:'File', iconCls:'xx'}),
                    new Ext.menu.Item({text:'View', iconCls:'Edit'})
                ]
            })
        ]
    });
       
    Ext.ns('CMONO.ext.EmotionBox');
       
    CMONO.ext.EmotionBox = Ext.extend(Ext.BoxComponent, {
        initComponent:function(){
            console.log('initComponent');
            CMONO.ext.EmotionBox.superclass.initComponent.call(this);
               
            this.tpl = new Ext.Template(
                '<img src="{iconType}" />',
                '<div class="{contentCls}">{content}</div>'
            );
               
        },
        onRender:function(container, position){
            console.log('onRender');
            CMONO.ext.EmotionBox.superclass.onRender.call(this, container, position);
               
            this.tpl.append(this.el, {
                iconType:this.iconType,
                contentCls:this.contentCls,
                conent:this.text
            });
               
            this.el.addClass('emotion-wrapper');
               
        }
    });
       
       
    Ext.reg('emotion', CMONO.ext.EmotionBox);
       
    CMONO.ext.EmotionBox.SIMPLE = 'help.png';
       
    var p = new Ext.Panel({
        title:'sssssssssssss',
        renderTo:Ext.getBody(),
        frame:true,
        items:[{
            xtype:'emotion',
            text:'AAAAAAAAAAAAAAAAA',
            contentCls:'emotion-content-cls',
            iconType:CMONO.ext.EmotionBox.SIMPLE
        }]
    });
       
});


知识共享许可协议
《ExtJS3 Component》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     179.94ms