<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的测试文件"
}
});
```
![](https://img2020.cnblogs.com/blog/2006336/202004/2006336-20200422093709416-1950738166.png)