开发者社区> pandamonica> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

ExtJS组件 的代码和运行效果

简介: 已经决定前端还是要介入,原因有两个: 1.显得专业,原因么,你懂得; 2. 不想做无用功; 本来想用VUE但是毕竟,人家已经用了Ext,咱们不能落下。 ExtJS 这个技术呢,有个包,有个开发环境,也有Doc或者API之类的。
+关注继续查看

已经决定前端还是要介入,原因有两个:
1.显得专业,原因么,你懂得;

  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个组件演习结束,下面介绍布局

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
cocoapods组件化
组件化的制作流程
67 0
《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件,组件时什么,它的作用,它的构架,以及怎么创建和周期还有常见的配置项,属性方法和事件以及其层级是什么都进行整理,希望对大家有帮助。 组件的基础知识.png        2     AbstractContainer(派生37个).
735 0
《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》,《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》,由于篇幅较长,所以必须肢解与各位分享。
1244 0
ExtJS学习(二)Ext组件模型
Ext中所有的组件都继承自Ext.component,这种单根继承的模型保证所有组件都拥有相同的通用方法与生命周期,这样在后续对这些组件进行维护管理时将更加便捷,同时也保证了在进行布局时的便利。
544 0
发现一个可以在线运行JS代码的网站
平时可以在这里玩 http://jsbin.com/
1014 0
SQLHelper.cs的经典代码
本文转自http://blog.csdn.net/ccnuxhb/article/details/3933493 using System; using System.
643 0
运行代码
运行代码 1、html结构,需要textarea和button标签 2、javascript代码,为每个button绑定事件 for(var i=0;i (function(){ btns[i].onclick=function(){ var w = window.open(); w.document.write(txts[i].value); } })(); } 测试 测试。
497 0
EXT多面板组合代码
        Ext.BLANK_IMAGE_URL = "http://www.cnblogs.com/widgets/ext-2.2.1/resources/images/default/s.gif";        Ext.
417 0
+关注
159
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载