javascript - Ext中Ext.tab.Panel 组件问题
怪我咯
怪我咯 2017-04-11 12:33:17
0
0
271

Ext.tab.Panel 组件代码:
Ext.define("myapp.view.application.TabMain", {

extend : "Ext.tab.Panel",
xtype : "tabmainT",
id : "tabmainT",
config : {
    tabBarPosition : 'bottom',
    defaults : {
        layout : 'fit'
    },
    tabBar : {
        hidden : true
    },
    items : [ {
        numb : 0,
        iconCls : "tabpostion",//指定背景图片样式类
        scrollable : true,
        items : [ {
            docked : 'top',
            items : [ {
                xtype : "panel",
                html : '第一个HTML',
                width : '100%'
            } ]

        } ]
    }, {
        numb: 1,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第二个HTML',
               width:'100%'
            }]

        } ]
    },{
        numb: 2,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第三个HTML',
               width:'100%'
            }]

        } ]
    } , {
        numb: 3,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第四个HTML',
               width:'100%'
            }]

        } ]
    } , {
        numb: 4,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第五个HTML',
               width:'100%'
            }]

        } ]
    } , {
        numb: 5,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第六个HTML',
               width:'100%'
            }]

        } ]
    }]
}

});

当我把{

        numb: X,
        iconCls: "tabpostion",
        scrollable: true,
        items:[{
            docked:'top',
            items : [{
                xtype : "panel",
                html : 
                    '第六个HTML',
               width:'100%'
            }]

        } ]
    }

的html代码去掉 xtype指定指定一个panel 然后就报错:

panel代码 Ext.define('myapp.view.application.Home',{

extend : 'Ext.Panel',
xtype:'home',
id:'home',
config : {
    layout:{
       type:'vbox',
       align:'stretch'        //子组件将填满整个宽度
    },
    
    items:[
        {
            xtype:'tabmainT',
            numb:0,    
            flex:13,
        },
        {
            flex:1,
            docked:'bottom',
            html:' <p class="bottom">'+
                        '<ul>'+
                            '<li class="bottom_icon icon01 current_01" id="shouye">首页</li>'+
                            '<li class="bottom_icon icon02" id="gouche">购车</li>'+
                            '<li class="bottom_icon icon03" id="goufang">购房</li>'+
                            '<li class="bottom_icon icon04" id="jiaodan">叫单</li>'+
                            '<li class="bottom_icon icon05" id="kefu">客服</li>'+
                            '<li class="bottom_icon icon06" id="shezhi">设置</li>'+
                            '<p class="clearfix"></p>'+
                        '</ul>'+
                    '</p>'
        }
    ]
},
initialize : function() {
    this.callParent();
    this.on({
        painted : 'onPainted',
          scope : this
      });
    
},

onPainted:function(cmp, eOpts){
    $(function(){
        $("#shouye").click(function(){
            $("#shouye").addClass("bottom_icon icon01 current_01");
            $("#gouche").attr("class","bottom_icon icon02");
            $("#goufang").attr("class","bottom_icon icon03");
            $("#jiaodan").attr("class","bottom_icon icon04");
            $("#kefu").attr("class","bottom_icon icon05");
            $("#shezhi").attr("class","bottom_icon icon06");
            Ext.getCmp("tabmainT").setActiveItem(0);
        });
        $("#gouche").click(function(){
            $("#shouye").attr("class","bottom_icon icon01");
            $("#gouche").addClass("bottom_icon icon02 current_02");
            $("#goufang").attr("class","bottom_icon icon03");
            $("#jiaodan").attr("class","bottom_icon icon04");
            $("#kefu").attr("class","bottom_icon icon05");
            $("#shezhi").attr("class","bottom_icon icon06");
            Ext.getCmp("tabmainT").setActiveItem(1);
        });
        $("#goufang").click(function(){
            $("#shouye").attr("class","bottom_icon icon01");
            $("#gouche").attr("class","bottom_icon icon02");
            $("#goufang").addClass("bottom_icon icon03 current_03");
            $("#jiaodan").attr("class","bottom_icon icon04");
            $("#kefu").attr("class","bottom_icon icon05");
            $("#shezhi").attr("class","bottom_icon icon06");
            Ext.getCmp("tabmainT").setActiveItem(2);
        });
        $("#jiaodan").click(function(){
            $("#shouye").attr("class","bottom_icon icon01");
            $("#gouche").attr("class","bottom_icon icon02");
            $("#goufang").attr("class","bottom_icon icon03");
            $("#jiaodan").addClass("bottom_icon icon04 current_04");
            $("#kefu").attr("class","bottom_icon icon05");
            $("#shezhi").attr("class","bottom_icon icon06");
            Ext.getCmp("tabmainT").setActiveItem(3);
        });
        $("#kefu").click(function(){
            $("#shouye").attr("class","bottom_icon icon01");
            $("#gouche").attr("class","bottom_icon icon02");
            $("#goufang").attr("class","bottom_icon icon03");
            $("#jiaodan").attr("class","bottom_icon icon04");
            $("#kefu").addClass("bottom_icon icon05 current_05");
            $("#shezhi").attr("class","bottom_icon icon06");
            Ext.getCmp("tabmainT").setActiveItem(4);
        });
        $("#shezhi").click(function(){
            $("#shouye").attr("class","bottom_icon icon01");
            $("#gouche").attr("class","bottom_icon icon02");
            $("#goufang").attr("class","bottom_icon icon03");
            $("#jiaodan").attr("class","bottom_icon icon04");
            $("#kefu").attr("class","bottom_icon icon05");
            $("#shezhi").addClass("bottom_icon icon06 current_06");
            Ext.getCmp("tabmainT").setActiveItem(5);
        });
    });
}

});
求大神帮忙告诉我哪里错了,如何改正

怪我咯
怪我咯

走同样的路,发现不同的人生

Antworte allen(0)
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage