本文共 3851 字，大约阅读时间需要 12 分钟。

<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',                width: 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,    //width: 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的测试文件"    }});