EXTJS4.2——9.添加Tab

<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
    Ext.onReady(function () {
      //fit 布局
      var borderPanel =   Ext.create('Ext.panel.Panel', {
            //自动获取屏幕大小
            title: '小小公司',
            layout: 'border',//这里设置panel的样式
            items: [{
                // xtype: 'panel' implied by default
                title: '小小页面栏',
                region: 'west',
                xtype: 'panel',
                margins: '5 8 4 5',
                 200,
                collapsible: true,   
                id: 'west-region-container',
                layout: 'fit',
                items: treeLocal
            }, {
                title: '数据展示区',
                region: 'center',     
                xtype: 'panel',
                margins: '5 5 0 0',
                items:[tabs]
            }],
            renderTo: Ext.getBody()
      });

      //这是fit自动填充，实现自动设置大小
      Ext.application({
          name: 'HelloExt',
          launch: function () {
              Ext.create('Ext.container.Viewport', {
                  layout: 'fit',
                  items: [borderPanel]
              });
          }
      });

})

var btnSubmit = Ext.create('Ext.Button', {
    text: '查询',
    //handler是用于设置按按键的时候使用的数据
    handler: function () {
        ExtData.load();
    }
});

var form = Ext.create('Ext.form.Panel', {
    title: '信息填写',
    layout: 'column',
    //这一步十分重要的，去掉宽度，然后设置自适应，然后这里父窗口不用设置fit
    height: 80,
    // 600,
    bodyPadding: 10,
    forceFit: true,
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Name',
        allowBlank: false  //判断是否允许空值
    }, btnSubmit
    ]
});


var ExtData = Ext.create('Ext.data.Store', {
    storeId: 'employeeStore',
    fields: ['Name', 'Age', 'Address'],//表示在图标上展示的信息
    proxy: {
        type: 'ajax',
        actionMethods: 'post',
        url: '/GridPanel/MessageBack',
        reader: {
            type: 'json',
            root: 'data',//注意點
            totalProperty: 'total'//注意點
        }
    },

    autoLoad: true,
    listeners: {
        beforeload: function (store, operation, eOpts) {
            //將查詢條件傳遞到後台
            var postData = {
                username: $("input[name='username']").val()
            };
            Ext.apply(store.proxy.extraParams, postData);
        }
    }

});
//设置表格
var grid = Ext.create('Ext.grid.Panel', {
    title: '详细信息',
    store: Ext.data.StoreManager.lookup('employeeStore'),
    columns: [
        { text: '姓名', dataIndex: 'Name' },
        { text: '年龄', dataIndex: 'Age' },
        { text: '居住地', dataIndex: 'Address' }
    ],
    layout:'fit',
    forceFit: true
});

//树的节点数据源

var treeLocal = new Ext.tree.TreePanel({
    title: '选择框',
    root: {
        text: '选择菜单',
        expanded: true,
        leaf: false,
        children: [
            { id:'treeFirst',text: '小小菜单',leaf: true }
        ]
    },
    listeners: {
        'itemclick': function (view, rcd, item, idx, event, eOpts) {

            var dirid = rcd.get('id'); //节点id

            if (dirid == "treeFirst" && $("#treePanel1").length == 0)
            { 
                var tab = tabs.add({
                    // we use the tabs.items property to get the length of current items/tabs
                    title: '数据查询',
                    id:'treePanel1',
                    items: [form, grid],
                    closable: true,
                    forceFit: true,
                    closeAction: 'destory',
                    autoDestroy: true
                });
              //  tabs.setActiveTab(tab);
            }
        }
    }

});

//创建tab文件操作
var tabs = Ext.create('Ext.tab.Panel', {
    forceFit: true,
    items: {
        title: '首页',
        html: "这个是leo的测试文件"
    }
});