上海网站建设浦东/博客推广工具-专业网站定制开发

已经决定前端还是要介入，原因有两个：
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个组件演习结束，下面介绍布局