extjs4 选项卡 求解释

看代码  哪里错了？  不显示东西
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../ext-4.2.1.883/bootstrap.js"></script>
    <script type="text/javascript" src="../ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
        Ext.require(['*']);        Ext.onReady(function () {            Ext.Msg.alert('Hello', 'Ext World!');        });
        var tabs1 = Ext.createWidget('tabpanel', {
            renderTo: "tabPanel",
            activeTab: 1,                       //指定默认的活动tab
            width: 600,
            height: 120,
            plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）
            enableTabScroll: true,              //选项卡过多时，允许滚动
            defaults: { autoScroll: true },
            items: [{
                id: "tab1",
                title: '普通Tab',
                html: "这只是一个非常普通的Tab。",
                items: [{ xtype: 'button', text: '按钮'}],
                closable: true                  //这个tab可以被关闭
            }, {
                id: "tab2",
                title: '内容来至div',
                contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取
            }, {
                id: "tab3",
                title: 'Ajax Tab',
                autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
            }, {
                id: "tab4",
                title: '事件Tab',
                listeners: { activate: handleActivate },
                html: "带事件的Tab。"
            }, {
                id: "tab5",
                title: '不可用Tab',
                disabled: true,
                html: "不可用的Tab，你是看不到我的。"
            }]
        });
        //单击tab4后触发的事件
        function handleActivate(tab) {
            alert(tab.title + ': activated事件触发。');
        }
    </script>
</head>
<body>
     <h1>基本选项卡</h1> 
    <div class="content" style="height: 150px">
        <div id="tabPanel">
            <div style="display: none">
                <div id="oneTab">
                    <p>这个tab所展示的内容是读取至其他HTML标签</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

解决方案 »

  1.   

    把你创建tab的代码放到Ext.onReady(...)里面就可以了(如果你的这个url：AjaxTabContent 没有问题的话)，如下：
    <script type="text/javascript">
            Ext.require(['*']);        Ext.onReady(function () {            Ext.Msg.alert('Hello', 'Ext World!');
                var tabs1 = Ext.createWidget('tabpanel', {
                  renderTo: "tabPanel",
                  activeTab: 1,                       //指定默认的活动tab
                  width: 600,
                  height: 120,
                  plain: true,                        //True表示tab候选栏上没有背景图片（默认为false）
                  enableTabScroll: true,              //选项卡过多时，允许滚动
                  defaults: { autoScroll: true },
                  items: [{
                      id: "tab1",
                      title: '普通Tab',
                      html: "这只是一个非常普通的Tab。",
                      items: [{ xtype: 'button', text: '按钮'}],
                      closable: true                  //这个tab可以被关闭
                  }, {
                      id: "tab2",
                      title: '内容来至div',
                      contentEl: 'oneTab'             //指定了当前tab正文部分从哪个html元素读取
                  }, {
                      id: "tab3",
                      title: 'Ajax Tab',
                      autoLoad: { url: 'AjaxTabContent', params: { data: "从客户端传入的参数" }, method: 'GET' }
                  }, {
                      id: "tab4",
                      title: '事件Tab',
                      listeners: { activate: handleActivate },
                      html: "带事件的Tab。"
                  }, {
                      id: "tab5",
                      title: '不可用Tab',
                      disabled: true,
                      html: "不可用的Tab，你是看不到我的。"
                  }]
               });
            });
            
            //单击tab4后触发的事件
            function handleActivate(tab) {
                alert(tab.title + ': activated事件触发。');
            }
        </script>
      

  2.   

    ext4如果用于商业是要收费的，现在用ext4的真不多。
      

  3.   

    ext 真的很好用，用起来舒服。而且代码质量很高。
    代码统一写法，很好看。真的很好看。