extjs_extjs demo - CSDN
extjs 订阅
extjs是一种软件。自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 展开全文
extjs是一种软件。自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。
信息
发展史
进行自定义的扩展
软件名称
Extjs
更新时间
2006年初
软件版本
1.0正式版
软件语言
中文
extjs序言
功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里实现了。其实从ext3开始就支持各种方式的统计,且有控件支持excel导出。发展史1、第一只“出海”的YUI-Ext只是作者Jack打算对基于BSD协议的Yahoo! User Interface (YUI)库进行自定义的扩展,但后来一度风头盖过其父辈YUI,足以说明 大家对它的热情,很多人把它投入项目,但并不十分了解它。分析人士打了一个比喻:就好比尚未谋面, 并不了解一个人的家庭、教育、品行等背景,只因为他有一副精致漂亮的外观,就对其陷入了疯狂的倾慕之中。因此分析人士建议,在投入项目之前,要认真仔细地了 解EXT的内在原理和与其他Ajax库不同地方。2、在2006年初 ,Jack Slocum(杰克.斯洛克姆 ) 就一套公用设施扩建为YUI 库而工作。这些扩展很快组织成一个独立的库代码并以“yui-ext"的名义下发布。3、在2006年秋天,Jack发行了版本为0.33的yui-ext,而最终被证明为最后版本的代码,根据这名字(下开放源代码DSB许可)。在年底之前,这个库已大受欢迎, 名字被简化为Ext,反映了它作为一个框架的成熟和独立。该公司成立于2007年初,Ext现在为双执照,使用LGPL和一个商业执照。4、在2007年4月1日,发布1.0正式版。5、官方在2009年4月14-16日的首次Ext Conference中发布了Ext的3.0 RC版本。6、2009年5月4日,Ext的3.0 版本发布。7、2010年1月8日,ExtJS已发展涵盖美国、日本、中国、法国、德国等全球范围的用户,现在的版本为Ext-5.0。8、2010年6月15日,当开发者访问著名的JavaScript库ExtJS网站,会发现自己被重导向到另一个不熟悉的网址和界面sencha。原来,ExtJS项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并,后两个项目的创始人David Kaneda和Dmitry Baranovskiy也将加入ExtJS。此举是ExtJS为了应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措。9、2011年4月22日,Extjs4.0正式发布,主要有以下改进:核心改进:检视框架的架构和重塑其基础。这些变化不单提供了产品性能,还提高了其健壮性。测试框架:在所有支持的浏览器上对框架进行了持续全面的测试。类系统:作为Extjs 4架构更新的一部分,引用了一个功能更完整的类系统。沙盒:在ExtJS历史上,ExtJS 4首次提供了完整的沙盒模式。从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。应用架构:在ExtJS 4,引入了一个标准化的几乎适合任何ExtJS应用程序的MVC风格的应用架构。使用MVC,开发团队只需要学习一种架构就能理解任何ExtJS 4的应用。SDK工具:正在测试beta版的Sencha SDK工具,在第一版本中包括了优化工具、生成器和slicer工具。这些工具可让你优化Javascript程序,以确保主题能在IE6正常工作。全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。更智能的渲染和布局:引入了新的渲染和布局管道,只有在需要的时候才更新DOM,从而让应用更快。改进了布局本身,删除了FormLayout,意味着你能使用任何布局组合创建最完美的表单。增压的数据包:ExtJS一个基础性的作品就是数据包。不管你将数据加载到Grid、tree或其它组件,改进的数据包,都比以往更容易。新架构还支持HTML的localStorage,数据流可轻松在你的应用中进出。10、 2012年3月14日,Extjs4.1正式发布。11、 2013年05月16日,Extjs4.2正式发布。12、2014年12月05日,Extjs5.1Beta版正式发布。13、2015年10月11日,Extjs6.0GPL开源版正式发布。14、2016年09月26日,ExtJS 6.2 正式版正式发布。 [1] 
收起全文
精华内容
参与话题
  • ExtJS基础入门

    万次阅读 2018-04-03 11:48:06
    公司需要用ExtJS搭建系统框架,然后,这个很老了,没有用过 。开始进行时候一脸懵逼,因为搜索了相关的知识,面临如下问题:1.版本太多,从一到六,不知从何入手2.提供的教程和视频都是需要下载 Sencha Cmd 和 Ruby...

    公司需要用ExtJS搭建系统框架,然后,这个很老了,没有用过 。

    开始进行时候一脸懵逼,因为搜索了相关的知识,面临如下问题:

    1.版本太多,从一到六,不知从何入手

    2.提供的教程和视频都是需要下载 Sencha Cmd 和 Ruby进行操作,对于只懂前端的我来说还是优点难度的。

    解决:

    1.询问公司技术,下载需要的版本,是5.1.0

    2.Sencha和Ruby可以不下载,他们只是可视化图形转换,编辑更容易理解而已。所以 我用webstorm这个工具进行书写,当然esclipe code也是可以。

    写代码前夕,遇到问题是:

    1.版本下载了,解压好之后,由于没使用推荐的工具,目录上显示一塌糊涂,根本对不上名称。

    上面包括了实例,打包文件等 。主要是 example实例,packages对应的是主题包。

    2.webstorm上面和其他工具不是自带Sencha ExJS的语法解析,不能自动补全和高亮显示,需要下载插件,files=>setting=>plugins=>Browse Resporities(联网下载)=>搜索Sencha ExJS下载。

    解决:

    1.自己搭建环境,简历一个新的文件夹,引入需要的主题包,必须的et-all.js,bootstrap.js和相关开头的css结尾的文件。

    2.插件下载好之后遇到的坑就是需要注册,注册的内容需要邮箱,姓名,公司等,但是注册不了的。原因是,需要twitter的帐号名字,还有一个图片验证,因为国家网络的限制,需要翻墙,但是我试过了,翻墙也注册不上,可能是网络原因。你可以尝试下,注册登录后有30天免费使用时间。我没帐号就没使用。

    自己也没使用过这个框架,只有从helloWorld做了。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World</title>
      <script src="./ext/ext-all.js"></script>
      <script>
       /* Ext.application({
          name:'HelloWorldText',
          launch:function(){
            Ext.create('Ext.container.Viewport',{
              layout:'fit',
              items:[
                {
                  html:'Hello ExtJS!'
                }
              ]
            });
          }
        });*/
        Ext.application({
          name:'系统管理',
          launch:function () {
            Ext.create('Ext.container.Viewport',{
              layout:'fit',
              items:[
                {
                  html:'风险系统'
                }
              ]
            })
          }
        })
      </script>
    </head>
    
    <body></body>
    </html>

    index.html的代码,解释下:注释掉的是别人的代码,然后自己又写了一遍联系。

    我的理解,引入ext.js 表明你使用了这个语法,类似于jQuery的文件引入。这个底层都有封装,实现功能。

    Ext.application({                                                                  - -Ext系统配置
          name:'系统管理',                                                              --名称(没弄懂作用,页面没显示,可能是标记吧)
          launch:function () {                                                         --    加载函数
            Ext.create('Ext.container.Viewport',{                                        --Ext创建容器并显示(Ext语法部分)
              layout:'fit',                                                                --显示方式
              items:[                                                                       --项目  数组书写
                {
                  html:'风险系统'                                      --    书写内容,加上html,说明显示位置     ‘风险系统’html显示名字
                }
              ]
            })
          }
        })

    这时页面显示  风险系统 字体  ,打开调试工具,会发现页面结构多了很多层级,这个应该是ExtJS的封装显示了 。

    ExtJS的语法类似于React中jsx写法,把内容都写成标签的形式在JS中,但是没有做到样式结构分离,他的CSS也是写在JS代码中。但是支持mvc,mvvm两种框架,版本5以后不支持ie8以下,可以在pc和移动端都有很好的流畅性。

    适合做系统。

    展开全文
  • Extjs基础(一)

    千次阅读 2019-01-09 11:39:44
    本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。 1.1.1window组件 简单的一个window面板: title: '窗口标题', height: 220, //可以使用百分比 width: 220, html: '内容...

    1.1基础学习
    说明:
    本示例的所有代码均在extjs6.2版本上测试通过,学习内容来源于官方文档和自己的一些见解。
    1.1.1window组件
    简单的一个window面板:

    title: '窗口标题',
        height: 220,  //可以使用百分比
        width: 220,  
        html: '内容部分',
        resizable: true, //允许改变大小
        modal: true,     //设置遮罩层
        closable: true,   //设置显示关闭按钮
        autoShow: true,  //自动显示
        maximizable: true,//显示最大化按钮
        minimizable: true //显示最小化按钮
    });
    

    一、属性
    plain:布尔类型,true表示强制与背景色保持协调,默认值为false。
    resizable:布尔类型,用户是否可以调整窗体大小,默认值为true表示可以调整大小。
    maxinizable:布尔类型,true表示显示最大化按钮,默认值为false。
    maximized:布尔类型,true表示显示窗体时将窗体最大化,默认值为false。
    closable:布尔类型,true表示显示关闭按钮,默认值为true。
    bodyStyle:与边框的间距,如:bodyStyle:“padding:3px”。
    buttonAlign:窗体中button的对齐方式(left、center、right),默认值为right。
    closeAction:"close"释放窗体所占内存,“hide"隐藏窗体,建议使用"hide”。
    在这里插入图片描述
    针对单个组件有handler事件可以处理:
    在这里插入图片描述
    二、方法
    show:打开窗体。
    setHidden(Boolean):隐藏窗体。
    close:关闭窗体。在这里插入图片描述
    三、事件
    show:打开窗体时触法。
    hide:隐藏窗体时触法。
    close:关闭窗体时触法。
    在这里插入图片描述
    1.1.2formPanel组件
    继上一小节window窗口组件,增加一个表单面板:

    const form = Ext.create('Ext.form.Panel', {
        title: '标题',
        width: 200,
        height: 100,
        html: '表单内容',
        style: 'margin:10px',//设置一个样式
        // frame: true
    });
    

    在这里插入图片描述
    一、属性
    width:整型,表单宽度。
    height:整型,表单高度。
    url:字符串,表单提交地址。
    二、方法
    reset:表单重置。
    isValid:表单是否验证全部通过。
    submit:表单提交。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    点击提交可以发现有请求信息,但是现在还不能访问远程,简单来说,就是你项目部署在tomcat中,只能是当前项目访问当前的服务端代码,比如/request/update,前面不可以跟上ip地址。
    1.1.3TextField
    基于上一小节,加入两个文本字段,用户接收用户输入的信息:

    items: [   //添加一个输入框,用于测试reset方法
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: '用户账号:',
            allowBlank: false,// 表单项非空,
            emptyText: '请输账号',
            blankText: '输入不能为空'
        },
        {
            xtype: 'textfield',
            name: 'password',
            fieldLabel: '用户密码:',
            allowBlank: false,// 表单项非空
            emptyText: '请输入密码',//提示信息
            blankText: '输入不能为空',
            inputType: 'password'
        }
    ]
    

    | 在这里插入图片描述
    一、属性
    allowBlank:是否允许为空,默认为true
    blankText:空验证失败后显示的提示信息
    emptyText:在一个空字段中默认显示的信息
    grow:字段是否自动伸展和收缩,默认为false
    growMin:收缩的最小宽度
    growMax:伸展的最大宽度
    inputType:字段类型:默认为text
    maskRe:用于过滤不匹配字符输入的正则表达式
    maxLength:字段允许输入的最大长度
    maxLengthText:最大长度验证失败后显示的提示信息
    minLength:字段允许输入的最小长度
    minLengthText:最小长度验证失败后显示的提示信息
    1.1.4Button

     {
        xtype: 'button',
        text: '重置',
        scale: large,//大的按钮,还有small和medium
        enableToggle: true,//有按压效果
        menu: [ //带有下拉列表
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3'},
            {text: 'Item 4'}
        ],
        handler: function () {
            //  alert('你点击了重置按钮');
        },
        listeners: {//监听多个事件
            click: function () {
                // this == the button, as we are in the local scope
                this.setText('I was clicked!');
            },
            mouseover: function () {
                    if (!this.mousedOver) {
                    this.mousedOver = true;
             alert('You moused over a button!\n\nI wont do this again.');
                }
            }
        }
    }
    

    在这里插入图片描述
    1.1.5登录界面
    通过一个登陆界面把前面的内容串起来:
    //创建一个表单

    const form = Ext.create('Ext.form.Panel', {
        title: '用户登录',
        width: 300,
        height: 300,
        buttonAlign: 'center',
        // url: 'http://localhost:8080/request/login',
        items: [   //添加一个输入框,用于测试reset方法
            {
                xtype: 'textfield',
                name: 'username',
                fieldLabel: '用户账号:',
                allowBlank: false,// 表单项非空,
                emptyText: '请输账号',
                blankText: '输入不能为空'
            },
            {
                xtype: 'textfield',
                name: 'password',
                fieldLabel: '用户密码:',
                allowBlank: false,// 表单项非空
                emptyText: '请输入密码',//提示信息
                blankText: '输入不能为空',
                inputType: 'password'
            }, {
                //单选按钮
                xtype: 'radiogroup',
                fieldLabel: '选择您的角色:',
                columns: 2,
                vertical: true,
                items: [
                    {boxLabel: '学生', name: 'rb', inputValue: '1'},
                    {boxLabel: '老师', name: 'rb', inputValue: '2', checked: true}
                ]
            }],
        buttons: [
            {
                xtype: 'button',
                text: '登录',
                handler: function () {
                    alert("登录按钮");
                }
            },
            {
                xtype: 'button',
                text: '重置',
                handler: function () {
                    form.getForm().reset();
                }
            }
        ]
    });
    //创建一个Window窗口作为容器
    const win = Ext.create('Ext.window.Window', {
            // height: 220,
            // width: 220,
            resizable: true, //允许改变大小
            closable: true,   //设置显示关闭按钮
            autoShow: true,  //自动显示
            maximizable: true,//显示最大化按钮
            minimizable: true, //显示最小化按钮
            buttonAlign: 'center',
            items: form,
            listeners: {
                hide: function () {
                    alert('窗口被隐藏');
                }
                ,
                close: function () {
                    alert('窗口被关闭');
                }
                ,
                show: function () {
                    //  alert('窗口显示出来');
                }
            }
        });
    

    在这里插入图片描述
    1.1.6numberfield,hidden,datefield

    {
        //数值字段
        xtype: 'numberfield',
        fieldLabel: '请输入你的身高',
        value: '1.7',
        minValue: '1.0',
        maxValue: '2.5',
        step: '0.1',//每次递减0.1
        blankText: '请输入在1.0-2.5范围的值'
    }, {
        //隐藏字段,一般用于向后台提交数据
        xtype: 'hiddenfield',
        name: 'hidden_field_1',
        value: ''
    }, {
        //日期控件
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: '你的生日',
        name: 'birthday',
    editable:false,//不允许编辑
        format: 'Y-m-d',//格式化日期显示
        value: new Date()  // defaults to today
    }
    

    在这里插入图片描述
    1.1.7checkboxfield
    基于上一小节,接着添加一个复选按钮的控件:

     {
        xtype: 'fieldcontainer',//需要使用这个容器来包含复选按钮
        fieldLabel: '你的爱好:',
        defaultType: 'checkboxfield',
        items: [
            {
                boxLabel  : '写代码',
                name      : 'coding',
                inputValue: '1',
                id        : 'checkbox1'
            }, {
                boxLabel  : '还是写代码',
                name      : 'coding',
                inputValue: '2',
                checked   : true,
                id        : 'checkbox2'
            }, {
                boxLabel  : '继续写代码',
                name      : 'coding',
                inputValue: '3',
                id        : 'checkbox3'
            }
        ]
    }
    

    在这里插入图片描述
    1.1.8ComboBox
    基于上一小节,接着添加内容:

    //数据源
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [
            {"abbr": "AL", "name": "群众"},
            {"abbr": "AK", "name": "共青团员"},
            {"abbr": "AZ", "name": "党员"}
        ]
    });
    //复选按钮
    {
        xtype: 'combobox',
        fieldLabel: '政治面貌:',
        value:'群众',//默认值
        store: states,
        queryMode: 'local',//查找数据方式,从本地查找
        displayField: 'name',
        blankText: '请选择你的政治面貌',
        editable: false//不允许编辑
    }
    

    在这里插入图片描述
    1.1.9文件上传

    Ext.onReady(function () {
        //窗体
        var win = new Ext.Window({
            title: '上传文件窗口',
            width: 500,
            height: 400,
            resizable: false,
            modal: true,
            closable: true,
            closeAction: 'hide',
        });
        //表单面板
        var addImageForm = new Ext.form.Panel({
            border: false,
            bodyPadding: 5,
            id: 'addImageForm',
            height: 350,
            fieldDefaults: {anchor: '100%'},//填充父窗口
            items: [
                {
                    xtype: 'fieldset', title: '图片上传',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '图片描述:',
                            name: 'picDisc',
                            id: 'picDisc',
                            allowBlank: false,
                            emptyText: '请输入图片的描述信息'
                        }, {
                            xtype: 'filefield',
                            fieldLabel: '上传图片',
                            name: 'pic',//名称需要和服务端保持一致
                            id: 'pic',
                            buttonText: '选择文件',
                            listeners: {
                                change: function (btn, value, eOpts) {
                                    var img = Ext.getCmp('img1');
                                    var file = btn.fileInputEl.dom.files[0];
                                    var url = URL.createObjectURL(file);
                                    img.setSrc(url);
                                }
                            }
                        }
                    ]
                }, {
                    xtype: 'fieldset',
                    title: '图片预览',
                    layout: 'column',
                    items:
                        {
                            xtype: 'image',
                            width: 130,
                            height: 200,
                            id: 'img1'
                        }
                }
            ],
            buttons: [{
                xtype: 'button',
                text: '确认上传', handler: function () {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: '/test/upload',
                            method: 'post',
                            submitEmptyText: false,
                            waitMsg: '请稍等,系统正在帮您添加',
                            success: function (form, action) {
                                Ext.MessageBox.alert('成功', action.result);
                            },
                            failure: function (form, action) {
                                Ext.MessageBox.alert('失败', action.result);
                            }
                        })
                    }
                }
            }, {
                xtype: 'button',
                text: '重置表单', handler: function () {
                    this.up('form').getForm().reset();
                }
            }]
        });
        win.items.add(addImageForm);
        win.show();
    });
    

    在这里插入图片描述

    展开全文
  • extjs使用、总结、感悟

    千次阅读 2016-12-12 16:43:32
    提到ExtJs,笔者可以说是感触颇深,本人经历了Extjs许多个版本,大版本从2.0开始,我第一次关注它!之后再项目中用到了3.0,4.2,6.0等不同版本,可以说见证了Extjs的发展贺强大之处。 简单解释下什么是Extjs。它是...

    提到ExtJs,笔者可以说是感触颇深,本人经历了Extjs许多个版本,大版本从2.0开始,我第一次关注它!之后再项目中用到了3.0,4.2,6.0等不同版本,可以说见证了Extjs的发展贺强大之处。
    简单解释下什么是Extjs。它是一个高度分装的前端开发语言:javascript。高度分装:是指封装了几乎所有项目上都会用的前端组件,而不是不可拆解的。扩展性相当高,是我见到过最强大的前端框架。之前还用过easyui框架,bootstrap响应式框架,经历了多个项目后,发现Extjs框架还是比较靠谱的,尤其对于一个后台程序员来说,简直就是福音,再不用为了布局而头疼,再不用为了兼容性而烦恼,再不用写大堆的CSS。

    下面介绍下Extjs的优缺点
    事物都有两面性,有好就有坏。Extjs也是这样。
    缺点
    1:UI,在外观方面,Extjs无疑完败给bootstrap、jqueryUI,在样式和布局方面Extjs显得十分的生硬。
    这里写图片描述
    图上是我做的demo。树形结构,表格,左右布局。
    2:Extjs依赖文件过于庞大,压缩后的“ext-all.js”,2M多,此外还有CSS样式文件等。这个问题直接导致很多互联网企业放弃Extjs,在高并发时代,大家都是在最求响应速度,加载过慢无疑使得用户体验很差。所以,Extjs不会出现在门户网站上,出现最多的地方是什么的?没错,企业级办公OA。Extjs的几套样式也是非常专业的OA风格。

    优点
    其实在上面的介绍中已经提到了很多Extjs的优点,比如说,组件多,实用与各种办公软件,比如说扩展性高,再比如说布局简单,不懂美工的也能做出大气的页面。更多的不说了,有兴趣的研究下Extjs,更值得提的是它的设计模式,读过源码的人一定能感觉出–其乐无穷啊。

    废话不说,学习Extjs开始。
    很多人说,我是写后台的,页面交给写前端的人去搞吧。而我想说,一个优秀的资深java高手,同样也能写一手好的前端代码。知识学到了就是自己的。
    Extjs版本的选择:
    1:如果你正在搭建自己公司的办公OA,推荐使用4.X版本,稳定版本。
    2:如果之前没有接触过Extjs,单纯的想学习,推荐研究下4.2。
    3:如果之前已经了解过Extjs,那么推荐学习最新的版本,目前官网已经发布6.X。
    两个大的版本,4.0之后,Extjs提出前端代码规范:MVC设计模式,此MVC非彼MVC,后java设计模式的MVC有一定的区别。
    无论是前端代码还是后台代码,都需要逻辑处理。而前端的工作会多一点,没有后台的数据访问,但是多了界面的交互,数据展示等。

    Extjs中MVC的诠释:
    M:对应java中的实体类(javaBean),Ext需要对后台返回的数据进行二次分装,也是OOP的表现。(代码如下:)

    Ext.define("sys.user.model.UserModel", {
        extend:"Ext.base.model.BaseModel",
        fields: [
            {name:"CREATE_TIME",type:"date",dateFormat:"Y-m-d H:i:s"},
            {name:"UPDATE_TIME",type:"date",dateFormat:"Y-m-d H:i:s"},
            {name:"CREATE_USER",type:"string"},
            {name:"CREATE_USER_NAME",type:"string"},
            {name:"ACTIVE",type:"int"},
            {name:"USER_NAME",type:"string"},
            {name:"SEX"},
            {name:"LOGIN_NAME",type:"string"},
            {name:"PASSWORD",type:"string"},
            {name:"EMAIL",type:"string"},
            {name:"PHONE",type:"string"},
            {name:"IP",type:"string"},
            {name:"LAST_TIME",type:"date",dateFormat:"Y-m-d H:i:s"}
        ]
    });

    Ext.define:定义一个类,java中使用new关键字。
    extend:继承,既然Extjs也模仿java的OOP,那么继承一定要有的,后面还会提到构造。
    fields:定义一个类里面的属性集合。

    V:视图表现层。java中V代表整个钱前段代码,包括:html、jsp、js、css等。而Extjs中,V表示构建页面的代码,没有逻辑处理、交互的代码。

     Ext.define("sys.user.view.UserView",{
        alias:"widget.UserView",
        extend:"Ext.base.view.BaseGridView",
        constructor:function(){
            this.selModel=null;
            this.forceFit=false;
            this.searchFiledName="员工姓名/登录帐号/联系方式/邮箱";
            this.columns=[
                {header:"员工姓名",dataIndex:"USER_NAME"},
                {header:"性别",dataIndex:"SEX"},
                {header:"登录帐号",dataIndex:"LOGIN_NAME"},
                {header:"创建人",dataIndex:"CREATE_USER_NAME"},
                {header:"创建时间",dataIndex:"CREATE_TIME"},
                {header:"最后修改时间",dataIndex:"UPDATE_TIME"},
                {header:"邮箱",dataIndex:"EMAIL"},
                {header:"联系方式",dataIndex:"PHONE"},
                {header:"状态",dataIndex:"ACTIVE"},
                {header:"上次登录IP",dataIndex:"IP"},
                {header:"上次登录时间",dataIndex:"LAST_TIME"}
            ];
            this.tbar=[//初始化工具栏
                "->",
                {text:"新增",action:"add",iconCls:"Add"},
                {text:"删除",action:"delete",iconCls:"Delete"},
                {text:"编辑",action:"edit",iconCls:"Edit"},
                {text:"查看岗位",action:"searchpost",iconCls:"Edit"},
                {text:"导出",action:"export",iconCls:"ExportExcel"},
                {text:"筛选",action:"search",iconCls:"Search"}
            ];
            this.putStore("sys.user.store.UserListStore");
            this.callParent(arguments);
        }
    });

    alias:为类定义别名。
    constructor:构造函数,构造函数的作用不解释了,和java一样。
    this.callParent(arguments):调用父类构造函数,Extjs中规定:在继承关系中,子类有构造函数,不会自动调用父类构造函数,如果需要执行父类构造函数,需要手动调用。
    C:也是Extjs的核心,逻辑处理、交互。

    Ext.define("sys.user.controller.UserController",{
        extend:"Ext.base.controller.BaseController",
        models:["Ext.base.model.BaseModel"],
        editUrl:window.ROOT+"/sys/user/edituser",//编辑用户
        init:function()
        {
            var me=this;
            var grid;
            var winForm=null;
            var postWin=null;
            var searchPostWin=null;
            this.control({
                "UserView":{
                    afterrender:function(gp){
                        grid=gp;
                        winForm=null;
                        postWin=null;
                        grid.down("button[action=add]").on("click",addUser);
                        grid.down("button[action=delete]").on("click",deleteUser);
                        grid.down("button[action=edit]").on("click",updateUser);
                    }
                }
            });
            /**
             * 修改用户
             */
            function updateUser(){
                var rows=grid.baseIsSelected();
                if(rows){
                    if(winForm==null)
                    {
                        winForm=Ext.create("sys.user.view.UserFormView");
                        winForm.down("button[action=save]").on("click",editUser);
                    }
                    var form=winForm.down("form");
                    form.reset();
                    winForm.setTitle("修改信息");
                    form.down("hidden[name=OPER]").setValue("edit");
                    form.getForm().loadRecord(rows[0]);
                    winForm.show();
                }
            }
            /**
             * 添加用户
             */
            function addUser(){
                if(winForm==null)
                {
                    winForm=Ext.create("sys.user.view.UserFormView");
                    winForm.down("button[action=save]").on("click",editUser);
                }
                winForm.down("form").reset();
                winForm.setTitle("添加信息");
                winForm.down("hidden[name=OPER]").setValue("add");
                winForm.show();
            }
            /**
             * 删除用户
             */
            function deleteUser(){
                grid.baseDeleteRow(me.editUrl);
            }
        },
        /**
         * push to panel
         * @return {}
         */
        show:function(){
            return Ext.create("sys.user.view.UserView");
        }
    });

    init:初始化函数。
    this.control:控制器控制核心。

    MVC有了,那么数据怎么访问呢,怎么请求后台呢?

    补充一个Store,类似java中的数据访问层Dao

    Ext.define("sys.user.store.UserListStore",{
        extend:"Ext.base.store.BaseGridStore",
        proxy:{type:"ajax",url:window.ROOT+"/sys/user/getuserlist",reader:{rootProperty:"data",totalProperty:"result"}},
        model:"sys.user.model.UserModel"
    });

    目录结构如下:
    这里写图片描述
    这样一来,前端的代码也被我们用MVC的模式分离出来了。为什么这么设计呢?本来一个js就搞定的事情,为什么要分好几个呢?我在刚接触Extjs4.2的时候也很困惑。后来在项目中体会到了它的好处,当前端的交互很多的时候,交互很复杂的时候,有了这样的分层,代码维护起来轻松多了。

    上面写的这些,只是对Extjs简单的认识,网上还有很多更详细的教程,这里不在罗说。
    笔者是个写后台的程序员,在平时的学习中,少不了自己研究写新鲜东西,有了后台代码,就要有前端来展示,笔者又是个强迫症受害者,不好看的界面绝对不用,CSS功底不足,于是乎我和Extjs相识了。
    笔者平时喜欢封装一些公共类来满足项目中的使用,让别人调用自己的代码,那感觉。。。。。。程序员们都懂!所以老毛病又犯了,Extjs中我也进行了二次封装,把一些常用的组件分装起来,下面会附上代码。
    上面的代码中大家可能看到了有些其实就是我已经分装过的,比如:

    extend:"Ext.base.model.BaseModel",//BaseModel就是分装的一个“类”
    this.putStore("sys.user.store.UserListStore");//putStore就是分装的函数

    二次分装的好处:假如有一天Extjs升级了,7.0,8.0,10.0,那么我们之前的项目想升级怎么办,如果过于依赖Extjs原有的封装,那么我们就太被动了,升级一次,大改一次。但是我们对Extjs的常用功能进行二次封装,用我们自己的函数实现Extjs的函数,那么升级就变得简单了,我们在升级的时候只需要升级二次封装的代码就OK了。

    下面的目录结构是笔者亲自封装的:
    这里写图片描述

    业务中的Controller都继承BaseControlle,Model继承BaseModel,Store继承对应的Store,View继承对应的View。

    下面是我对GridPanel的简单分装:

    Ext.define("Ext.base.view.BaseGridView",{
        alias:"widget.BaseGridView",
        extend:"Ext.grid.Panel",
        singleton:false,//指定为true类定义单例类(该类只能有一个实例)
        region:"center",
        columnLines:true,
        forceFit:true,
        border:false,
        page:true,
        searchFiled:true,
        selModel:{selType:"checkboxmodel"},//复选框
        viewConfig:{
            markDirty:false,
            enableTextSelection:true
        },
        columns:[],
        putStore:function(s){//自定义函数
            var st=Ext.create(s,{proxy:{extraParams:{"p":this.page}}});
            this.store=st;
            if(this.searchFiled){//搜索文本框
                if(!this.searchFiledName){
                    searchFiledName="";
                }
                if(!this.tbar){
                    this.tbar=[];
                }
                var txSearchField=Ext.create("Ext.plug.form.SearchField",{width:300,emptyText:this.searchFiledName,labelWidth:0,store:st});
                this.tbar.unshift(txSearchField);
            }
            if(this.page){
                this.bbar=[{xtype:"pagingtoolbar",store:st,displayInfo:true}];
            }
            for(var i=0;i<this.columns.length;i++){
                if(!this.columns[i]["align"])this.columns[i]["align"]="center";
                if(!this.columns[i]["width"])this.columns[i]["width"]=150;
            }
        },
        /**
         * 获取选中行
         */
        baseIsSelected:function(){//自定义函数
            var list=this.getSelectionModel().getSelection();//Extjs的函数
            if(list.length>0){
                return list;
            }
            else {
                return false;
            }
        },
        /**
         * 数据刷新
         */
        baseReloadData:function(){//自定义函数
            this.getStore().loadPage(1);//Extjs的函数
        }
    });

    学习Extjs的过程中,我在这里总结下:
    阶段1:读懂一个demo代码,理解设计模式和编程是想。
    阶段2:理解事件、函数,绑定事件、触发函数。(afterrender,beforeload等)这些经常用的关键词要深刻体会。
    阶段3:本章介绍的Extjs不是很多,因为笔者希望和大家分享编程思想,而不是Extjs的技术点。技术点有很多博客都已经写的很详细了,官网也有API。在Spring中经常会提到AOP,笔者也是受AOP思想的启发,在程序员之路上,慢慢摸索着。

    展开全文
  • 1、Extjs——ExtJs简介

    千次阅读 2014-09-12 09:23:41
    ExtJs是一个富客户端AJAX框架。 1、准备环境搭建

    ExtJs是一个富客户端AJAX框架。

    1、准备环境搭建

    myeclipse10集成spket:把下载到的spket-1.6.23解压后,拷贝features和plugins两个文件夹拷贝到eclipse/dropins,然后重启eclipse,点击Window/Preferences/Spket/JavaScript Profiles,点击New新建一个ExtJs,选中ExtJs,点击Add Library,在弹出的框中选中ExtJs,然后再点击Add File把ext.jsb2选中,最后设为默认(Default).这里要注意使用ExtJs4.2时的jsb3文件从网上下载

    使用spket编写js时会出现提示。进行测试。

    1)在myeclipse中新建一个web project项目,在WebRoot下建立一个test.js文件,打开方式使用spket Javascript  Editor,可以在Window/Preferences/General/Editors/Files Associations中将*.js的打开方式默认设置为spket Javascript  Editor,


    2)打开编辑test.js文件,会有提示出现:


    3)引入ExtJs开发包,就是把下载的extjs4.2解压后的文件引入,先看一下extjs的包结构:


    Ext开发包目录结构说明
    - builds目录为ExtJS压缩后的代码
    - docs目录为ExtJS的文档
    - examples目录中是官方的演示示例
    - locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文
    - pkgs中是ExtJS各部分功能的打包文件
    - resource中书ExtJS要用到的图片文件与样式表文件
    - src目录是未压缩的源码
    - bootstrap.js是ExtJS库的引导文件,通过参数可以自动切换ext-all.js和ext-debug.js
    - ext-all.js文件是ExtJS的核心库,是必须要引入的
    - ext-all-debug.js文件是-all.extjs的调试版,在调试的时候可能需要使用

    先把resources文件夹拷贝到项目的js/ExtJs下,对于examples,可以在开发时进行参考,拷入时,先关闭验证,右键点项目——Properties:


    去掉JavaScript Validator和Validation项,这样能加快速度。然后还要考入locale/ext-lang-zh_CN.js本地资源文件,ext-all.js,ext-all-dev.js,ext-all-debug.js,bootstrap.js,其中ext-all*是ext的核心文件,带dev的是开发调试模式用的,不带是正常部署应用时用的,bootstrap文件用来判断开发模式,然后自动引入ext-all或是ext-all-dev。

    最终的结果:


    现在环境搭建完毕,写一个测试,修改index.jsp:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'index.jsp' starting page</title>
    	<meta http-equiv="pragma" content="no-cache">
    	<meta http-equiv="cache-control" content="no-cache">
    	<meta http-equiv="expires" content="0">    
    	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    	<meta http-equiv="description" content="This is my page">
    	<!--
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	-->
    	<span style="color:#ff0000;"><!-- 引入ext的样式文件 ,因为定义了basePath,href使用相对路径,从js开始-->
    	<link rel="stylesheet" type="text/css" href="js/ExtJs/resources/css/ext-all.css">
    	
    	<!-- extjs的核心文件 -->
    	<script type="text/javascript" charset="utf-8" src="js/ExtJs/bootstrap.js"></script>
    	
    	<!-- 国际化资源文件 -->
    	<script type="text/javascript" charset="utf-8" src="js/ExtJs/ext-lang-zh_CN.js"></script>
    	
    	<script type="text/javascript" src="test.js">
    		
    	</script></span>
      </head>  
      <body>
        This is my JSP page. <br>
      </body>
    </html>
    
    需要三步引入三个extjs文件,包括样式文件,核心文件和国际化资源文件,然后是引入我们自己的js文件。test.js:

    Ext.onReady(function(){
    
    	Ext.MessageBox.alert('提示信息!','hello word!');
    });
    显示结果:

    如果觉得显示的字体小,可以进行修改,打开resources/css/ext-all.css,将其中的11px替换为12px,extjs默认字体大小为11px。




    展开全文
  • ExtJs5新增了对MVVM模式的支持,该实例演示了其基本用法,在此基础上可快速搭建实际项目,完成更复杂的业务功能。 该实例为典型的单页面应用(SPA),各功能模块封装成独立的JS文件,并按需加载(非一次性加载所有JS...
  • extjs的各个版本的下载地址

    千次阅读 2018-04-09 16:01:01
    Extjs最新版下载链接:http://www.sencha.com/products/extjs/download/其它版本下载:Extjs 5 beta 版下载链接:http://cdn.sencha.com/ext/beta/ext-5.0.0.736.zipExtjs 4.2.1 下载链接:...
  • extjs

    2019-07-14 21:24:39
    自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程...单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选...
  • ExtJs学习(一)~~ 简述概念

    千次阅读 2018-09-22 13:53:59
    如果想看我的学习心得、项目截图、写ExtJs专栏的目的,可以看一下以下这篇文章: https://blog.csdn.net/xiaozhegaa/article/details/82806835 二、ExtJs概念 1、什么是ExtJs? What ExtJS是一个Ajax框架,是一...
  • extjs6.6框架的web项目(登录+首页)

    热门讨论 2020-07-30 23:30:07
    extjs6.6框架的web项目,此资源是上一个资源的更新版。 用senchacmd成功发布,通过改变base-color改变主题风格,功能包含登录页、首页左菜单和列表,详见代码及部署说明文档。
  • Extjs 6.2 实战 (一)

    千次阅读 2018-05-16 16:35:02
    我是根据Extjs 6.2实战这本书来学习的现在就把这本书上面的例子与大家分享一下 顺便记录一下我的学习轨迹ExtJs4 到 ExtJs5 是从MVC到MVVM模型的转变,MVVM模型带来的好处是控制器终于可以跟随视图创建或者销毁了MVVM...
  • 【翻译】ExtJS vs AngularJS

    万次阅读 热门讨论 2014-06-19 15:17:25
    ExtJS和AngularJS是两个行业内领先的富界面开发框架。TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程序。本文讲述的就是使用这两种技术来开发多个应用程序后的开发体验。本文围绕利弊、架构...
  • ExtJs笔记

    千次阅读 2012-06-30 13:30:27
    .Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架。 ExtJs是一个用javascript写...
  • ExtJs常用布局--layout详解(含实例)

    万次阅读 2018-09-28 17:20:50
    笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 本文所有实例代码已提供下载,下载链接:...
  • EXTJS6.6.0包

    2020-07-26 23:33:54
    2012年3月14日,Extjs4.1正式发布。 2013年05月16日,Extjs4.2正式发布。 2014年12月05日,Extjs5.1Beta版正式发布。 2015年10月11日,Extjs6.0GPL开源版正式发布。 2016年09月26日,ExtJS 6.2 正式版正式发布。 [1]
  • eclipse 部署EXTJS

    千次阅读 2015-01-05 15:56:16
    下载:ExtJS 4.1.1 在Eclipse中安装spket插件 下载:spket-1.6.23.zip 最低要求:你需要java 1.5或更高版本运行安装程序,可独立使用 步骤: 1.作为eclipse的插件使用,按Plugin进入下载页面把他下载下来。 2.下载...
  • extjs 2.2

    热门讨论 2020-07-15 23:36:03
    extjs 2.2的压缩包
  • ExtJs选择器

    万次阅读 2013-06-24 15:45:40
    想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query...
  • 手把手教你学ExtJS 6.0 附源码

    千次下载 热门讨论 2020-07-30 23:30:27
    该文档有30页,详细介绍了从零开发一个ExtJS6的应用程序。该教程涵盖了ExtJS6的大多数知识点。如果你的ExtJS感兴趣,并且按照教程一步一步的做了,掌握ExtJS开发是轻而易举的事。学不会你的打我。
  • 利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局,当然,使用《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》(点击打开链接)中的vbox也是可以的。其实ExtJs的表单插件与...
  • Extjs MVC开发模式详解原文链接简介在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)...
1 2 3 4 5 ... 20
收藏数 61,451
精华内容 24,580
关键字:

extjs