已经决定前端还是要介入，原因有两个：
1.显得专业，原因么，你懂得；
- 不想做无用功；
本来想用VUE但是毕竟，人家已经用了Ext，咱们不能落下。
ExtJS 这个技术呢，有个包，有个开发环境，也有Doc或者API之类的。
对于刚刚上手的新手，可以使用Ext官网提供的在线webservice来测试ext代码，找找感觉：
https://fiddle.sencha.com/#view/editor
这个网址，访问的时候，界面如下：
其实还有个地方：
http://docs.sencha.com/extjs/6.5.0/guides/quick_start/presenting_data.html
这个官网的Doc，可以边看边改边运行查看效果
ExtJS的组件和容器
组件component
容器container
组件放在容器中
下面介绍八种组件：
1.Component组件
代码
var cum = Ext.create('Ext.Component', {
html: "我们绘制的组件：Component",
width: 300,
height: 400,
shadow: true,
style: {
coler: '#f12',
backgroundColor: '#f82'
},
renderTo: Ext.getBody()
});
cum.center();2.Container容器
代码：
Ext.onReady(function () {
var cum = Ext.create('Ext.container.Container',
{
layout: {
type: 'vbox', //垂直排列组件
align: 'center'
},
html: "我们绘制的组件：Container(带有两个items)",
width: 300,
height: 200,
shadow: true,
renderTo: Ext.getBody(),
style: {
coler: '#a92',
backgroundColor: '#fff'
},
defaults:{
labelWidth:100,
flex:0
},
items: [ //三个子组件 两个日期选择框
{
xtype: 'datefield',
name: 'startDate',
fieldLabel: '开始日期'
}, {
xtype: 'datefield',
name: 'endDate',
fieldLabel: '结束日期'
}
]
});
});3.panel组件
使用ExtJS官网自带的测试机时，需要选择一下浏览器类型
代码：
Ext.onReady(function () {
var con = Ext.create('Ext.panel.Panel', {
layout: {
align: 'center'
},
title: 'book',
height: 260,
renderTo: Ext.getBody(),
defaults: {
style: {
padding: '5px',
},
bodyPadding: 5
},
tools: [{
type: 'refresh',
tooltip: '刷新',
handler: function (event, toolEl, panel) {
alert("用户刷新数据");
}
}, {
type: 'save',
tooltip: '保存',
handler: function (event, toolEl, panel) {
alert("用户保存数据");
}
}],
items: [{
title: "标题信息",
height: 120,
items: [{
fieldLabel: 'book',
xtype: 'textfield'
}],
flex: 2
}, {
title: "标题信息",
height: 120,
items: [{
fieldLabel: 'cad',
xtype: 'textfield'
}],
flex: 2
}
]
});
});4.panel的toolbar上添加上下左右的按钮
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'book',
height: 220,
html: 'say goodbye',
tools: [{
type: 'save'
}],
tbar: [{
xtype: 'button',
text: '顶部按钮1'
}, {
xtype: 'button',
text: '顶部按钮2'
}],
bbar: [{
xtype: 'button',
text: '底部按钮1'
}, {
xtype: 'button',
text: '底部按钮2'
}],
lbar: [{
xtype: 'button',
text: '左侧按钮1'
}, {
xtype: 'button',
text: '左侧按钮2'
}],
rbar: [{
xtype: 'button',
text: '右侧按钮1'
}, {
xtype: 'button',
text: '右侧按钮2'
}],
});
});5.tab页
代码
Ext.onReady(function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
renderTo:Ext.getBody(),
height:200,
items:[
{
title:'默认tab',
html:'kaikaixinxin'
}],
bbar:[
{xtype:'tbfill'},
{
xtype : 'button',
text : '添加',
listeners:{
click:function(){
var tab = tabPanel.add({
title:'new tab',
html:'time: '+ Ext.util.Format.date(new Date(),'H时i分s秒'),
closable:true
});
tabPanel.setActiveTab(tab);
}
}
},
{
xtype:'button',
text:'关闭',
listeners:{
click:function(){
tabPanel.remove(tabPanel.getActiveTab());
}
}
},
{xtype:'tbfill'}
]
});
});6.Viewport
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',
{
layout:'border',
items:[
{
region:'west',
html:'西',
width:100,
border:true,
margins:'0 0 5 0'
},
{
region:'north',
html:'北',
height:90,
border:true,
margins:'0 0 5 0'
},
{
region:'south',
html:'南',
height:80
},
{
region:'east',
html:'东',
width:80
},
{
region:'center',
html:'中间',
}
]
});
});7.windows组件
代码：
Ext.onReady(function(){
Ext.create('Ext.window.Window',
{
title:'查询图书',
width:400,
height:300,
x:20,
y:30,
html:'hahahah',
tools:[
{
type:'save',
tooltip:'保存数据',
handler:function(event,toolEl,panel){
alert("用户保存数据");
}
}
],
dockedItems:[
{
xtype:'toolbar',
dock:'bottom',
items:[
{
text:'button1'
},
{
text:'button2'
},
{xtype:'tbfill'},
{
text:'button3'
}
]
}
]
}).show();
});8.MessageBox对话框组件
<html>
<head></head>
<body>
<button onclick='Ext.Msg.alert("提醒","对话框哦",function(){
Ext.DomHelper.overwrite("target",id+"执行alert按钮后的效果");
})'>alert对话框
</button>
<button onclick='Ext.Msg.confirm("确认","确认框哦",function(id){
Ext.DomHelper.overwrite("target",id+"执行confirm按钮后的效果");
})'>confirm对话框
</button>
<div id = "target"></div>
</body>
</html>至此教材中8个组件演习结束，下面介绍布局