Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
272 views
in Technique[技术] by (71.8m points)

Ext中Ext.tab.Panel 组件问题

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 然后就报错:
clipboard.png

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:' <div 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>'+
                            '<div class="clearfix"></div>'+
                        '</ul>'+
                    '</div>'
        }
    ]
},
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);
        });
    });
}

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...