ExtJS3 Container结构

Ext.ns("Application");
Application = function(config){
    Ext.apply(config);
};
Ext.onReady(function(){
    var panel = new Ext.Panel({
        title:'第七章',
        width:500,
        height:300,
        tbar:[
            {
                xtype:'button',
                text:'<b>Top Left</b>',
                iconCls:'Arrowright'
            },'->',
            {
                xtype:'button',
                text:'Top Right',
                iconCls:'Arrowright'
            }
        ],
        bbar:[
            {
                xtype:'button',
                text:'Bottom Left',
                iconCls:'Arrowright'
            },'->',
            {
                xtype:'button',
                text:'Bottom Right',
                iconCls:'Arrowright'
            }
        ]
    });
       
    //panel.render(Ext.fly('container'));
       
    /*var viewport = new Ext.Viewport({
        layout:'border',
        defaults:{
            xtype:'panel',
            frame:true,
            collapisble:true
        },
        items:[{
            region:'north',
            html:'North',
            height:120
        },{
            region:'center',
            html:'North'
        },{
            region:'south',
            html:'South',
            height:120
        },{
            region:'east',
            html:'East',
            width:120
        },{
            region:'west',
            html:'West',
            width:120
        }]
    });
       
    //viewport.render(Ext.getBody());
    */
    var panel2 = new Ext.Panel({
        title:'Button Group',
        frame:true,
        items:[{
            xtype:'buttongroup',
            columns:2,
            items:[{
                xtype:'button',
                text:'主要功能',
                rowspan:3,
                scale:'large',
                width:35,
                height:90,
                iconCls:'Flagcn',
                iconAlign:'top'
            },{
                xtype:'button',
                scale:'medium',
                iconCls:'Drink',
                iconAlign:'top'
            },{
                xtype:'button',
                scale:'medium',
                iconCls:'Drink',
                iconAlign:'top'
            },{
                xtype:'button',
                scale:'medium',
                iconCls:'Drink',
                iconAlign:'top'
            }]
        },{
            xtype:'button',
            iconCls:'Add',
            text:'你最不喜欢的手机',
            scale:'large',
            arrowAlign:'bottom',
            iconAlign:'top',
            menu:{
                defaults:{
                    checked:false,
                    group:'version',
                    checkhandler:function(item, checked){
                        if(checked){
                            Ext.Msg.alert('您选择了' + item.text);
                        }
                    }
                },
                items:[{
                    text:'Lumia 928'
                },{
                    text:'HTC One'
                },{
                    text:'HTC Butterfly'
                },{
                    text:'Apple Iphone5'
                }]
            }
        }]
    });
    panel2.render(Ext.fly('container'));
});


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

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

Tab Content 5

开发技术


开发平台和工具

sitemap     162.60ms