extjs5_extjs5.0 - CSDN
精华内容
参与话题
  • 跟我一起学extjs5(01--开发的总体说明)

    万次阅读 多人点赞 2015-07-30 08:34:57
    跟我一起学extjs5(01--开发的总体说明)  我之前使用extjs4+java spring MVC架构了一套“模块常规功能自定义的系统”(博客详见点击打开链接),该系统中详细讲解了设计思想,但并未有实现过程。由于extjs5的...


    跟我一起学extjs5(01--开发的总体说明)


            我之前使用extjs4+java spring MVC架构了一套“模块常规功能自定义的系统”(博客详见点击打开链接,该系统中详细讲解了设计思想,但并未有实现过程。由于extjs5的发布,并有许多新特性,而我对原系统正有重构和加入新功能的想法,因此决定对该系统进行升级,并将升级的开发过程写成博客。

            系统开发将分成二个阶段:
    • 第一阶段将用extjs5搭建前台界面,完成界面的总体布局、若干种菜单、表格Grid、窗体Form、数据记录的增册查改、以及若干自定义组件,还有界面属性的自定义与展示。
    • 第二阶段将开发java后台的控制体系,使其和前台结合,能够完成整个自定义系统的运转。


    系统开发要使用的工具:

    • eclipse  ;
    • sencha cmd(sencha cmd 下载),这个用来建立extjs5的应用程序,可以打包和压缩extjs的源程序;
    • ruby (ruby 下载地址) ,这是sencha cmd 的一个支持环境。 (最好安装1.93版,其他版本sencha cmd 在在使用过程中会出现错误)。
    下载及安装过程在各网站上都有详细的说明,这里就不重复了。

            由于先开发前台的界面和功能,因此需要对extjs有一定的了解,系统中我不会很详细的讲解每一条语句,对于基本的属性和函数需要自己去查api进行了解。最终目标是要开发一套根据配置文件来自定义界面的系统,开发过程中也不会使用界面生成器,所有的界面都是自己写代码,这样更有利于熟悉extjs的层次结构。
            从extjs4开始,加入了MVC的架构,开发程序使用OOP的技术,使程序的结构和可读性大大加强。在extjs5中,又增加了MVVM的特性,根据我的理解就是界面的控件的属性可以根据绑定值自动的改变,这对于我来说是一个十分重要的新特性,在此之前某些功能都是我自己手工完成编码,现在可以自动实现了。(extjs MVC和MVVM的介绍

           从下节开始,我将用eclipse建立一个Dynamic web Project, 然后在其 war 目录下用 sencha cmd 建立一个extjs5的工程,建立好的工程有一些自动生成的js代码,在启动了服务后可以在浏览器中查看。

    展开全文
  • 实例代码使用方法: 1.第一步:使用sencha cmd 创建项目 名称需要注意 输入为oaSystem 我使用的命令如下:sencha -sdk E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn ...

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923

    实例代码下载地址: http://download.csdn.net/detail/sushengmiyan/7817549

    本文作者:sushengmiyan

    ------------------------------------------------------------------------------------------------------------------------------------

    暂时完成效果图如下:

    1.登录界面



    输入任意用户名与密码(暂时没有设置登录验证等,后期添加),点击用户登录进入主页面


    在左下角,显示了你刚才输入的用户名,实现了数据的传输。


    代码模块展示如下:

    app.js

    /*
     * This file is generated and updated by Sencha Cmd. You can edit this file as
     * needed for your application, but these edits will have to be merged by
     * Sencha Cmd when upgrading.
     */
    Ext.application({
        name: 'oaSystem',
    
        extend: 'oaSystem.Application',
        
        //autoCreateViewport: 'oaSystem.view.main.Main',
    	
        //-------------------------------------------------------------------------
        // Most customizations should be made to oaSystem.Application. If you need to
        // customize this file, doing so below this section reduces the likelihood
        // of merge conflicts when upgrading to new versions of Sencha Cmd.
        //-------------------------------------------------------------------------
    
    });
    
    application.js

    /**
     * The main application class. An instance of this class is created by app.js when it calls
     * Ext.application(). This is the ideal place to handle application launch and initialization
     * details.
     */
    Ext.define('oaSystem.Application', {
        extend: 'Ext.app.Application',
        
        name: 'oaSystem',
        uses:['oaSystem.SimData', 'Ext.ux.ajax.*'],
        views: [
            // TODO: add views here
        ],
    
        controllers: [
            'Root'
            // TODO: add controllers here
        ],
    
        stores: [
            // TODO: add stores here
        ],
        
        launch: function () {
            // TODO - Launch the application
    		//服务器傀儡,模拟真实世界中服务器交换
    		//oaSystem.SimData.init();
    		//console.log('launch begin');
    		//this.callParent()
    		Ext.ux.ajax.SimManager.init().register({
    		  '/authenticate':
    		  {
    			type: 'json',
    			data: function(ctx){
    			  return Ext.apply({}, true);
    			}
    		  }
    		});
        }
    });
    

    login.js

    Ext.define(
      'oaSystem.view.login.Login',
      {
    	requires:['oaSystem.view.login.LoginController'],
        extend: 'Ext.window.Window',
        controller: 'login',
    	closable: false,
    	resizable : false,
    	modal: true,
    	//draggable: false,
    	autoShow: true,
    	title: '用户登录---OA办公系统',
    	glyph: 'xf007@FontAwesome',	
    	items:[{
    		xtype:'form',//父窗体
    		reference: 'form',
    		bodyPadding: 20,
    		items:[{
    			xtype: 'textfield',
    			name: 'username',
    			labelWidth: 50,
    		    fieldLabel: '用户名',
    			allowBlank: false,
    			emptyText: '用户名或邮箱地址'
    		  },{
    			xtype: 'textfield',
    			name: 'password',
    			labelWidth: 50,
    			inputType: 'password', 
    		    fieldLabel: '密  码',
    			allowBlank: false,
    			emptyText: '请输入您的密码'
    		  }]
    	}],
        buttons: [{
    			    name: 'registbutton',
    			    text: '用户注册',
    				glyph: 'xf118@FontAwesome'
    			  },{
    			    name: 'loginbutton',
    			    text: '用户登录',
    				glyph: 'xf110@FontAwesome',
    				region: 'center',
    				listeners:{
    				  click: 'onLoginbtnClick'//单击事件 调用LoginConroller.js中的onLoginbtnClick函数
    				}
    			  }]
      }
    );
    logincontroller.js

    Ext.define(
      'oaSystem.view.login.LoginController',
      {
        extend: 'Ext.app.ViewController',
        alias: 'controller.login',
    
       //用户登录按钮事件处理
       onLoginbtnClick: function(){
            var form = this.lookupReference('form'); 
    		if (form.isValid()) {
    		  this.login({
    			data: form.getValues(),
    			scope: this,
    			success: 'onLoginSuccess',
    			failure: 'onLoginFailure'
    		})}
        },
    
        onLoginFailure: function() {
            // Do something
            Ext.getBody().unmask();
        },
    
        onLoginSuccess: function(logname, logpass) {
    		console.log('登录成功,用户名: ' + logname);
    		console.log('登录成功,密  码: ' + logpass);
            this.fireViewEvent('login', logname);
            //var org = this.lookupReference('organization').getSelectedRecord();
           // this.fireViewEvent('login', this.getView(), user, org, this.loginManager);
        },
    
        login: function(options) {
            Ext.Ajax.request({
                url: '/authenticate',
                method: 'GET',
                params: options.data,
                scope: this,
                callback: this.onLoginReturn,
                original: options
            });
        },
    /**
        applyModel: function(model) {
            return model && Ext.data.schema.Schema.lookupEntity(model);
        },
    */		
        onLoginReturn: function(options, success, response) {
            options = options.original;
            //var session = this.getSession(),
            //    resultSet;
            
            if (success) {
    			console.log('log in success');
    			/**
                resultSet = this.getModel().getProxy().getReader().read(response, {
                    recordCreator: session ? session.recordCreator : null
                });
                    
                if (resultSet.getSuccess()) {
                    Ext.callback(options.success, options.scope, [resultSet.getRecords()[0]]);
    				/*/
    				console.log(response);
    				Ext.callback(options.success, options.scope, [options.data.username, options.data.password]);
                    return;
                //}
            }
    
            //Ext.callback(options.failure, options.scope, [response, resultSet]);
        }
      }
    );

    main.js
    Ext.define(
      'oaSystem.view.main.Main',
      {
    	  extend: 'Ext.container.Viewport',
    	  uses:['oaSystem.view.main.region.Top', 'oaSystem.view.main.region.Bottom'],
    	  layout: { type: 'border' },
    	  viewModel: { type: 'main' },
    	  items: [{
    			 xtype: 'maintop',
    			 region: 'north'
    		  },
    		  {
    			 xtype: 'mainbottom',
    			 region: 'south',
    			 bind: '你好,{currentUser}'
    		  },
    		  {
    		    xtype: 'panel'
    	      }],
    	  
    	  initComponent: function(){
    	  //设置图标文件,设置后可以使用glyph属性
    	    Ext.setGlyphFontFamily('FontAwesome');
    	    this.callParent();
    	  }
      }
    
    );
    
    root.js

    /**
     * The main application controller. This is a good place to handle things like routes.
     * 这是主程序的控制器,这里适合做类似路由转发这样的事情
     */
    Ext.define('oaSystem.controller.Root',
    	{
          extend: 'Ext.app.Controller',
          uses: ['oaSystem.view.login.Login','oaSystem.view.main.Main'],
        /**
         * 初始化事件
         */
    	  onLaunch: function () {
    	    var session = this.session = new Ext.data.Session();
    	    if (Ext.isIE8) {
    		  Ext.Msg.alert('亲,本例子不支持IE8哟');
    		  return;
    	    };
    		
    	    this.login = new oaSystem.view.login.Login({
                session: session,
                listeners: {
                    scope: this,
                    login: 'onLogin'
                }});
    	  },
        /**
         * logincontroller 的 "login" 事件回调.
         * @param user
         * @param loginManager
         */
        onLogin: function (username, loginController) {
            this.login.destroy();
    		this.user = username;
    		console.log('username: ' + username);
    		this.showUI();
        },
    
        showUI: function(){
    	  
    	  console.log('show ui started');	
    	  //显示主界面
    	  this.viewport =  new oaSystem.view.main.Main(
    		  {   //用户信息传入视图         
    		      viewModel: {
                  data: 
    			    {
                        currentUser: this.user
                    }
                  }
    		  }
    	  );
    	}
      });
    

    实例代码打包下载地址:http://download.csdn.net/detail/sushengmiyan/7817549
    使用方法:

    1.第一步:使用sencha cmd 创建项目 名称需要注意 输入为oaSystem
       我使用的命令如下:sencha -sdk  E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn
    如果不太清楚sencha cmd的命令参数,建议先阅读 http://blog.csdn.net/sushengmiyan/article/details/38313537

    2.第二步:使用sencha app build 命令构建应用程序,使用sencha web start 测试是否成功。
    建议先阅读:http://blog.csdn.net/sushengmiyan/article/details/38331347


    3.将刚才新建目录下的app文件夹全部删除,将下载的压缩文件解压缩,直接解压缩到项目目录即可,重新build运行。




    展开全文
  • ExtJS5 - 认识MVVM

    千次阅读 2015-12-24 18:51:41
    ExtJS 5在原先支持MVC(Model-View-Controller)架构的基础上,新增了对MVVM(Model-View-ViewModel)架构的支持。MVVM架构的一大重要特性就是利用模型层和视图层的双向数据绑定,从而更好的实现应用程序代码的分层...

    从2014年6月份最新发布的ExtJS 5开始,在原先支持MVC(Model-View-Controller)架构的基础上,新增了对MVVM(Model-View-ViewModel)架构的支持。MVVM架构的一大重要特性就是利用模型层和视图层的双向数据绑定,从而更好的实现应用程序代码的分层和解耦。


    数据绑定(Data Binding)

    组件可以利用新增加的"bind"配置项来关联config配置项(只要它们有setter方法)和来自ViewModel的数据。运用数据绑定机制,能够确保当config配置项绑定的数据发生变化的时候,其对应的setter方法会自动被调用执行,而不需要去自定义处理方法。

    双向数据绑定能够实现视图和模型之间的实时数据同步,任何在视图中的数据变化都会自动被回写,并自动更新到绑定了相同数据的其他组件。


    视图模型 (ViewModel)

    Ext.app.ViewModel是用来管理数据对象(Data Object)的类,绑定相关的数据到对应视图,并在其发生变化的时候进行响应。和ViewController一样,ViewModel属于引用它的视图类(三位一体)。正是因为View和ViewModel进行关联,所以它也能够和其父类的ViewModel进行关联,这就允许子视图类能够继承其父类的ViewModel中的数据。

    在实际使用中,ViewModel类通常会被扩展,并使用"formulas"和"stores"这两个重要的特性来简化数据绑定的工作。

    Formulas

    除了保持数据和提供绑定之外,ViewModel还提供一种按照一定规则对数据进行再加工的方式(Formulas)。Ext.app.ViewModel-cfg-formulas封装了在ViewModel内部的数据依赖性,并保持视图专注于自己的结构。这与对传统的数据模型(Data Model)中的字段进行转换配置工作类似。

    Stores

    ViewModel通过stores,提供命名对象给它关联的视图,以实现数据绑定。和formulas一样,stores可以使视图比较自由地声明其结构,而避免因为复杂的store定义而变得杂乱。同时还能够确保,它们也有自己的Store实例。


    视图控制器(ViewController)

    在ExtJS 4中,Controller提供的是在应用程序全局范围内控制业务逻辑的解决方案。而ExtJS 5支持专门针对特定视图的控制器(ViewController),它直接与具体的视图实例进行关联。从实例化到销毁,ViewController始终与引用它的组件联系在一起。而相同视图类的第二个实例,会得到它自己对应的ViewController实例。

    相对与在MVC架构下使用全局性的Controller,创建并使用ViewController则更加合适。特别是ViewController简化了事件的连接及组件的引用,使开发人员不必过多地关注声明细节及内存泄露等问题,从而更好地专注于业务逻辑本身。

    References and Listeners

    ViewController最重要的特性就是帮助大型应用连接组件和事件的能力,甚至当这些组件被容器的不同层次相分离的时候。例如,一个视图可能由各种不同的容器嵌套构成,而ViewController则能够非常简单得处理其中的引用和监听。

    相比较在ExtJS 4中使用组件查询的方式,这种在ViewController中使用的新型的连接方式则更加明显和安全,因为这些连接都是被封装在ViewController内部的。也就是说,当把一个视图嵌套到另一个视图的时候,这两个视图的监听和引用是彼此孤立的,并且只与它们各自的ViewController连接。



    综合运用

    在ExtJS 5中,可以使用ViewController来改进原先的MVC架构,简化与视图的关联;也可以使用ViewModel自动关联视图和数据,并提供Commands来操作数据。当然,更好的编程实践是综合运用ViewModel及ViewController,View和ViewModel之间实现双向数据(属性)绑定,View和ViewController之间实现事件绑定,而ViewController则可以与ViewModel进行通讯,并通过向其发送指令执行相关操作、更新数据。



    后记

    作为一种逐渐流行起来的软件设计模式,MVVM并不是ExtJS 5发明创造的,更不是其独有的。上面列举的,不过是ExtJS 5在MVVM架构下的具体使用形式,而且还是非常表面化的形式。要真正理解MVVM的核心要义,并把其很好得应用在ExtJS 5项目之中,真正做到应用程序的高效率、低耦合、易维护、可扩展,绝不是一朝一夕之功。那需要在实际项目中,不断地Coding,反复地实践、练习、体会、归纳总结乃至权衡取舍!



    展开全文
  • extjs5.1.1

    2020-07-30 23:30:03
    extjs5.1.1-gpl 5.X里面第一个比较全的资源包,修正了5.0里面的许多bug
  • ExtJs5新增了对MVVM模式的支持,该实例演示了其基本用法,在此基础上可快速搭建实际项目,完成更复杂的业务功能。 该实例为典型的单页面应用(SPA),各功能模块封装成独立的JS文件,并按需加载(非一次性加载所有JS...

    ExtJs5新增了对MVVM模式的支持,该实例演示了其基本用法,在此基础上可快速搭建实际项目,完成更复杂的业务功能。

    该实例为典型的单页面应用(SPA),各功能模块封装成独立的JS文件,并按功能模块加载(非一次性加载所有JS文件)。

     

    目录结构:

     

    项目特点:

    1、基于ExtJS 5.1版本实现,采用Neptune样式风格,中文语言;

    2、使用全新的MVVM模式架构,面向对象写法;

    3、全系统只有一个index.html界面,登录框也封装成独立的视图组件;

    4、通过实现角色管理、用户管理两个基础的功能模块,演示了Viewport、Container、Panel、TreePanel、Grid、Window、Form等常用组件的用法,以及border、column、form、fit、hbox等常用布局方式;

    5、通过自定义一个Ext.button.Button的扩展类,演示了自定义扩展Ext类的基本方法;

    6、使用JSON,模拟从后台动态获取数据;

     

    注意事项:

    因为file协议不支持Ajax获取数据,所以请把该项目部署到Nginx、Apache或Tomcat等Web服务器,然后通过http协议访问。

     

    下载地址:

    Git下载:https://github.com/yyhsong/iExtJs5/

     

     

    展开全文
  • ext js 5正式版

    热门讨论 2020-07-29 14:20:42
    从http://extjs.org.cn/download找到的说是ext的正式版下载,这里在csdn共享一份,免费给大家下载试用,纯粹是学习使用,如果有侵犯版权还请及时告知。
  • Extjs5.1学习(一)panel

    2018-09-14 18:22:26
    1.下载extjs 5.1的gpl版本的压缩文件。 2.解压到F:\xampp\htdocs\ 里面 3.F:\xampp\htdocs\目录下,新建app.js 和index.html空白文件,等下编辑。 二、编写代码 文本打开 index.html,输入代码 ...
  • ExtJs 入门教程

    万次阅读 2015-06-12 10:22:00
    ExtJs 入门教程 ExtJs 入门教程一[学习方法] ExtJs 入门教程二[Hello World] ExtJs 入门教程三[窗体:Window组件] ExtJs 入门教程四[表单:FormPanel] ExtJs 入门教程五[文本框:TextField] ExtJs 入门...
  • Ext JS 6正式版的GPL版本下载地址

    万次阅读 2015-07-03 09:15:31
    下面是Ext JS 6正式版的GPL版本下载地址 https://www.sencha.com/legal/gpl/
  • Extjs各版本的下载链接

    万次阅读 多人点赞 2015-11-28 14:09:20
    Extjs的版本繁多,本文收集了Extjs各个版本的下载链接,包括官网和非官网的,以及各种汉化版api,欢迎大家下载分享。 Extjs最新版下载链接:http://www.sencha.com/products/extjs/download/ 其它版本下载: ...
  • extjs grid数据改变后刷新的实现

    万次阅读 2008-12-29 11:16:00
    做了一个编辑extjs grid记录的窗体,但更改数据后,怎么重新刷新grid让数据显示呢?做了半天的尝试,其实到最后只需一句话,faint:-)this.store.reload();不用加任何参加都可以了:-)
  • extjs官网+extjs官网案例

    万次阅读 2013-04-25 18:45:00
    extjs官网: http://www.sencha.com/ extjs官网案例: http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ 另外: http://extjs.org.cn/examples
  • extjs获取当前时间

    万次阅读 2014-01-06 15:04:12
    ///获取当前日期(到秒) var curDate = new Date() //格式化; var time=Ext.Date.format(curDate, 'Y-m-d');
  • ExtJs2.2中文版API帮助文档

    万次阅读 2009-11-30 08:41:00
    ExtJs2.2中文版API帮助文档(不是在线的是CHM格式的,方便、好用。)下载地址:http://download.csdn.net/source/1831237效果图: ExtJs2.2英文版API帮助文档(安装版不是在线的)下载地址:...
  • ExtJS教程(1)---初窥ExtJs

    万次阅读 多人点赞 2014-07-01 23:43:00
    本教程用的版本是ExtJs5.0,在后期
  • 对某个控件而言,如果需要动态隐藏,则直接: 控件.hidden=true; 对其fieldLabel中的字需要隐藏,则同理使用: 控件.hideLabel=true 直接进行操作。
  • 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如何获取Grid中某一行某一列的值 举报| 分享| 2013-11-28 15:03wslyc890624 | 浏览 8014 次  软件开发 extjs获取Grid单元格的值 2013-11-28 15:47 #2016年高质量新标准全面升级!#...
  • extjs6整合到web项目中

    万次阅读 2016-01-10 21:31:15
    最近有一个项目需要应用extjs作为前端界面,因此研究了一下如何将extjs 6引入到项目中。以下是操作步骤  extjs下载地址  sencha cmd 搭建extjs 6环境 安装sencha cmd下载extjs6 并解压到 extjscmd 进入到extjs...
  • 获取EXTJS中的FormPanel的所有控件值和属性 myPanel.items.each(function(item,index,length){ alert(item.getName()); alert(item.initialConfig.name); alert(item.initialCon
1 2 3 4 5 ... 20
收藏数 60,481
精华内容 24,192
热门标签
关键字:

extjs5