精华内容
下载资源
问答
  • Extjs 5 学习笔记

    2015-10-22 16:30:21
    Extjs 5 学习笔记,在网上下载整理好的。
  • ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来 gmiyan/article/details/38313537 本文作者:sushengmiyan -------------------------------------------------------------资源链接--...

    ExtJS5学习笔记]第二节 Sencha Cmd 学习笔记 使你的sencha cmd跑起来

    gmiyan/article/details/38313537
    本文作者:sushengmiyan
    -------------------------------------------------------------资源链接-----------------------------------------------------------------------
    翻译来源  Sencha Cmd官方网站:  http://www.sencha.com/products/extjs/up-and-running/cmd-getting-started
    ------------------------------------------------------------------------------------------------------------------------------------------------


    带着Ext JS 5来使用sencha cmd

    -------------------------------------------------------------------
      这个指导通过处理使用 sencha cmd的sencha generate app命令来创建应用程序,本文是以允许一个应用程序来结束的
      处理更新一个存在的应用程序来体验Sencha cmd是在本章结束的时候介绍的,首先理解什么是"ideal"和“default”是很重要的,在默认的结构和已经存在的应用程序中驱动更新是有很大区别的。
      

    学习基础:

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

        如果想阅读以下内容,那么你需要先了解上节内容: http://blog.csdn.net/sushengmiyan/article/details/38295575


    一键生成你的应用程序代码:

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

      我们的出发点就是使用命令来产生一个应用程序,执行以下命令:
      sencha generate app -ext MyApp E:\senchaworkspace\MyApp

    可以看到如下执行结果


    以上命令会从官网下载试用版本的ext代码到你本地,如果你已经购买正版代码,那么需要使用下一节(-sdk命令来生成你的应用程序)在你的硬盘文件夹下可以看到:


    这表明自动生成了你的程序框架。

    需要注意的是,生成的EXTjs 是商业体验版本,如果你购买了,那么你需要下载ext js的zip包,并且使用-SDK命令来制定SDK的路径,这样,就不会去默认下载SDK而是按照你本地的文件来生成了。

    命令如下: sencha -sdk /这里是你的sdk路径/ generate app MyApp 你的App的路径。如 sencha -sdk c:sencha5.0.0 generate app OASystem d:\oasys

    执行完成之后可以看到如下的文件夹路径:

    [plain]  view plain copy 在CODE上查看代码片 派生到我的代码片
    1. .sencha/                        # Sencha-specific files (for example, configuration)  
    2.     app/                        # Application-specific content  
    3.         Boot.js                 # Private, low-level dynamic loader for JS and CSS  
    4.         Microloader.js          # Loads app based on app.json content  
    5.         sencha.cfg              # Application configuration file for Sencha Cmd  
    6.         build-impl.xml          # Standard application build script  
    7.         *-impl.xml              # Implementations of various build phases  
    8.         defaults.properties     # Default values and docs for build properties  
    9.         ext.properties          # Build property values specific to Ext JS  
    10.         *.defaults.properties   # Build property values by env (e.g. "testing")  
    11.         plugin.xml              # Application-level plugin for Sencha Cmd  
    12.         codegen.json            # Data for merging generated code during upgrade  
    13.     workspace/                  # Workspace-specific content (see below)  
    14.         sencha.cfg              # Workspace configuration file for Sencha Cmd  
    15.         plugin.xml              # Workspace-level plugin for Sencha Cmd  
    16.   
    17. ext/                            # A copy of the Ext JS SDK  
    18.     cmd/                        # Framework-specific content for Sencha Cmd  
    19.         sencha.cfg              # Framework configuration file for Sencha Cmd  
    20.     packages/                   # Framework supplied packages  
    21.         ext-theme-classic/      # Ext JS Theme Package for Classic  
    22.         ext-theme-neptune/      # Ext JS Theme Package for Neptune  
    23.         ...                     # Other theme and locale packages  
    24.     src/                        # The Ext JS source  
    25.     ...  
    26.   
    27. index.html                      # The entry point to your application  
    28. app.json                        # Application manifest  
    29. app.js                          # Launches the Application class  
    30. app/                            # Your application's source code in MVC structure  
    31.     model/                      # Folder for application model classes  
    32.     store/                      # Folder for application stores  
    33.     view/                       # Folder for application view classes  
    34.         main/                   # Folder for the classes implementing   
    35.             Main.js             # The Main View  
    36.             MainModel.js        # The `Ext.app.ViewModel` for the Main View  
    37.             MainController.js   # The `Ext.app.ViewController` for the Main View  
    38.     Application.js              # The `Ext.app.Application` class  
    39.   
    40. packages/                       # Sencha Cmd packages  
    41.   
    42. build/                          # The folder where build output is placed  

    这个路径和上方文件夹截图是没有区别的都是一样的。

    构造你的应用程序:

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

    只需要执行以下命令就可以构造你的应用程序打包了

    sencha app build,这个命令需要你在你的应用程序文件夹下执行哦。可以看到我的执行过程如下:


    需要注意不能使用-sdk命令了,使用会出现问题哦

    执行完成之后可以看到增加了build目录,下方就是包含了js代码 sass还有主题的文件夹。

    Sencha 的网络服务容器:

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

    使用 sencha web start命令来开启你的服务。服务允许你将本地应用程序当做网络服务。


    这个命令将1841端口制定为当前的访问端口,如果想停止服务就执行如下命令: sencha web stop或者ctrl+c来结束服务

    想访问你的服务,只需要在浏览器中执行如下路径:

    http://localhost:1841 

    当我们访问的时候,可以看到默认生成的网页如下:

    如果你不想使用1841端口,你可以在执行的时候制定端口号码:sencha -port 8080 web start


    扩展你的应用程序

    使用 sencha generate 命令帮你你快速的创建一个mvc的组件包像controllers和models 

    执行以下命令sencha help generate你可以看到有如下的扩展信息:

    重要:为了执行命令,你需要在当前应用程序的路径下执行才可以。

    增加一个新的models

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

    使用sencha generate model 命令就可以。

    如图 


    这样就创建了一个User的Model包含三个属性

    增加一个新的Controllers

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

    类似上述命令,执行 sencha generate controller Central


    增加一个view

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

    也是一样执行 sencha generate view SomeView



    客户化定制构造程序

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

    现在又多种多样的配置选项可以使用在 ”.sencha/app/sencha.cfg“文件夹下,在只有一张页面的情况下,可以忽略”.sencha/workspace“配置文件夹


    classpath类路径

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

    sencha app build 命令制定去哪里找到你的应用程序的代码全部依赖于app.classpath配置,它是在”.sencha/app/sencha.cfg“文件夹下的。默认的数值是

    app.classpath=${app.dir}/app,${app.dir}/app.js

    更高层次的阅读:

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

    想了解更多的关于sencha cmd的命令处理,你额可以参考 Inside the app build process

    更新你的应用程序

    使用 sencha app upgrade[新的路径]

    对于已经存在的应用程序来说,可能默认的不是index.html这时候需要你在app.json中制定:

    {
        ...
    
        "indexHtmlPath": "index.php"
    }
    展开全文
  • 由于是demo 直接使用本地数据 var cities = [ { id : 0, ... // pageSize : 5, mode : "local", // or http or remote emptyText : "请选择湖南城市", // listWidth : 300 } ];

      由于是demo 直接使用本地数据

    var cities = [ {
    			id : 0,
    			name : '城市 0'
    		}, {
    			id : 1,
    			name : '城市 1'
    		}, {
    			id : 2,
    			name : '城市 2'
    		}, {
    			id : 3,
    			name : '城市 3'
    		}, {
    			id : 4,
    			name : '城市 4'
    		} ];

    设置如何解析数据

    var model = Ext.define('city', { // 数据解析 以后可做成工厂模式 extend :
    			extend : 'Ext.data.Model',
    			idProperty : 'id',
    			fields : [ {  //字段映射
    				name : "cid",
    				type : "int",
    				mapping : 0
    			}, {
    				name : "cname",
    				type : "string",
    				mapping : 1
    			} ]
    		});
    
    		var store = Ext.create('Ext.data.Store', {
    			model : model,
    			data : cities,
    			/*
    			 * proxy : { type : 'ajax', url : url, reader : { type : 'json', } }, //此处可远程加载数据到combobox
    			 */
    			autoLoad : true
    		});
    最后创建 combbox

    return [ {<span style="white-space:pre">				</span>//此处若是直接渲染在界面中 应使用new  combobox对象
    			xtype : 'combobox',
    			store : store,
    			triggerAction : "all",
    			displayField : "name",
    			valueField : "id",
    			// pageSize : 5,
    			mode : "local", // or http or remote
    			emptyText : "请选择湖南城市",
    		// listWidth : 300
    		} ];



    展开全文
  • http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each 本文作者: sushengmiyan ------------------------------------------------------------------------------------------------------...

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

    sencha官方API:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each

    本文作者:sushengmiyan

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

    看一下官方的介绍:

    Iterates an array or an iterable value and invoke the given callback function for each item.

    遍历所有可以循环的数组或者可迭代变量,并且执行给定的回调函数来处理每一个成员。

    有一个简单的数组的例子如下:

    var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
    
    Ext.Array.each(countries, function(name, index, countriesItSelf) {
        console.log(name);
    });
    
    var sum = function() {
        var sum = 0;
    
        Ext.Array.each(arguments, function(value) {
            sum += value;
        });
    
        return sum;
    };
    
    sum(1, 2, 3); // returns 6

    The iteration can be stopped by returning false in the function callback.// 通过设置返回值false来结束迭代。

    Ext.each is alias for Ext.Array.each//Ext.each方法是ext.Array.each的别名。

    参数介绍:

    iterable  :就是你要进行迭代的object,如果不可循环,就只执行一次了。

    fn:回调函数,当遍历一次的时候就执行一次,函数包含三个参数

      item,就是每次遍历的值

       index,当前值的序号index

       allItems:就是当前的数组对象本身。

    返回值:

      当想结束的时候就返回false就可以了。


    实例演示:

    1.使用cmd生成一个默认的程序

    2.在\app\view\main文件夹下的MainController.js中修改onClickButton方法。

    如下:

    onClickButton: function () {
            //Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    	var StudentsJSON = {  
    	  student:[{  
    	    name: '张三',  
    	    studentid: 200801,  
    	    grade: 80  
    	  },{  
    	    name: '李四',  
    	    studentid: 200802,  
    	    grade: 90  
    	  },{  
    	    name: '王五',  
    	    studentid: 200803,  
    	    grade: 90  
    	  },{  
    	    name: '李二麻子',  
    	    studentid: 200804,  
    	    grade: 90  
    	  }]  
    	}; 
    
        Ext.each(StudentsJSON.student, function(student, index) {
    		alert(student.name);
            if (student.studentid == '200803') {
    			alert('下一个是李二麻子,但是我不让他显示了');
                return false; // 这里设置出口
           }});
        }

    显示效果如下:


    点击button之后:


    最后是:





    展开全文
  • 使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是...

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是前端导出,不涉及后端。


    源代码打包下载

    本次使用的是github上的一个开源项目Exporter
    下载地址:https://github.com/iwiznia/Ext.ux.Exporter
    下载之后,可以看到文件目录是这样的(已经是4年前维护的项目了):

    项目概述

    将源代码嵌入到应用中

    要实现功能的话,这里面的所有文件都要加到项目中的。
    然后,需要在使用导出的页面上加入这个js文件的引入:

    <script type="text/javascript" src="<%=context %>/pages/yourpathtojsppage/export-all.js"> </script>
    在extjs的onready之前引入如下所需:

              Ext.Loader.setConfig({ enabled: true });
              Ext.Loader.setPath('Ext.ux.exporter', 'exporter'); 
              Ext.require([
                'Ext.ux.exporter.Exporter'
              ]);
    

    grid定义的时候加上导出excel的入口:

    var grid = Ext.create('Ext.grid.Panel', {
    frame: true,
    title: 'test',
    columnLines: true, // 加上表格线  
    height: 800,
    features: [{
        ftype: 'summary'
    }],     
    columns: [{yourclolunms}],
      store: ytkbbStore, 
              dockedItems: [{
      xtype: 'toolbar', 
      dock: 'top',
      items: [{xtype: 'exporterbutton',store: yourStore}]
             }],
    renderTo: Ext.getBody()
    

    });

    这样,就实现了将导出excel的功能嵌入到了应用程序中。

    查看导出按钮以及导出效果

    查看grid表格,发现已增加按钮,如图:
    这里写图片描述

    时间费用kg
    2014-032271882.74
    2014-041461200.12
    2014-051871561.27
    2014-06111930.18
    2014-0750 433.5
    2014-081501267.5
    2014-091641343.75
    2014-101341070.66

    导出之后的excel截图如下:
    这里写图片描述

    可以看到正确进行了数据导出.

    扩展支持sum统计和groupsum分组

    技巧:对worksheet.js 进行修改可以调整表格设置,表格内容的出来都是在这里。
    //增加合计行
    if (this.hasSum){
    var style;
    Ext.each(this.columns, function(col,index,self) {
    style = ‘odd’;
    if (col.summaryType==”sum”){
    var v = this.store.sum(col.dataIndex);
    cells.push(this.buildCell(‘合计: ’ + v, ‘String’, style).render())
    }else{
    cells.push(this.buildCell(”, ‘String’, style).render())
    }
    }, this);
    rows.push(Ext.String.format(“{0}”, cells.join(“”)));
    };

    以上是对最后一个统计行的处理。
    //分组合计行
    buildGroupSumRow: function(me, groupkey, store) {
    var style,cells = [];
    if (me.stripeRows === true) style = ‘odd’;
    type = ‘String’;
    var insertRow = function(me){
    Ext.each(me.columns, function (col, dataIndex) {
    if (!col.groupSumField){
    cells.push(me.buildCell(”, type, style).render());
    }else{
    var abc = store.getGroups().getByKey( groupkey );//sumByGroup(store.groupField);
    var sumabc = abc.sum(col.dataIndex);
    cells.push(me.buildCell(‘合计: ‘+sumabc, type, style).render());
    }
    });
    return Ext.String.format(“{0}”, cells.join(“”));
    };
    return insertRow(this);
    }
    以上是处理分组的,可以实现sum方法合计也可以取平均值等。OK到现在就可以正确的导出表格数据到excel了。

    展开全文
  • Sencha ext js 5之前的版本中是没有viewmodel这个概念的,现在extjs5既然支持mvvm模式了,那么她的组件也就相应的增加了对mvvm的默认支持。现在看看我们经常使用的panel组件对mvvm模式的强大支持。
  • 一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢?目录目录 extjs的查询组件的API 查询实例 基本的组件查询 组件树...
  • Extjs 5 分组统计gridpanel 解决了在IE下数据无法正常显示的问题。有实际代码,运行简单,实用。
  • 懒人一只 直接贴代码算了 createGridPanel : function(url, height, pageSize) { //var sm = new Ext.grid.CheckboxSelectionModel(); if (!pageSize) pageSize = 10; var model = Ext.define('Product', ...
  • 如果这个文件找不到,Extjs会给我们抛出一个异常信息,直到你解决这个问题。 应用程序(application) 让我们从index.html开始看 <!DOCTYPE HTML> <title>MyApp <!-- The line below ...
  • 这个文件夹存放的都是extjs5官方的例子,学习的话对我们帮助很大,我们仅仅需要一个tomcat服务器即可。 将sencha extjs5的所有东西解压到tomcat的webapps\ROOT文件夹下。这样启动tomcat就可以了。文件目录如下: ...
  • sencha extjs 5 增加一个struts2的配置,这样可以在设置好前台布局之后,与后台交互获取数据显示。现在有一个问题是struts2对于url的跳转action支持比较良好,但是对于像Extjs这样,ajax请求的,无url跳转的实现,...
  • 5. Creating Custom Components 定制个人组件    1) Composition or Extension 聚合还是扩展    2) Subclassing 子类  a. Ext.Base是所有EXTJS类的基石    3) Template Methods  a. ...
  • http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel-cfg-store 本文作者: sushengmiyan ---------------------------------------------------------------------------------------------...
  •  http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems 本文作者: sushengmiyan ----------------------------------------------------------------------------------------------...
  • 继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台...extjs前端导出设置 extjs后台对应的解决方案 创建excel工作簿 创建一个excel页签 生成excel样式并初始化 产生表格标题行build headers 构造数据
  • 5.包装管理系统:方便集成的由管理系统(像Ext js 的主题) 6.构建脚本. 通过在应用程序中增加“before”和"after"给应用程序增加一些额外的设置点让客户可以定制适合自己需求的脚本。 7.转换工具:强大的代码选择器...
  • 数据绑定(DataBinding)和视图模型(ViewModel)是Ext JS5 新增的强大特性。它们俩可以让你写最少的代码和使用声明类型的风格来帮助你解耦管理。 一个ViewModel就是一个类,这个类管理数据对象。它允许对数据感兴趣...
  •  5) As for EXTJS 5, eliminated the need to call initConfig() manually. Only for your own classes that extend Ext.Base, initConfig() still neneds to be called   4. Statics 静态成员  1) 通过...
  • 但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹 文件夹 extjs的查询组件的API 查询实例 主要的组件查询 组件树查询 通过组件的属性检索 属性匹配操作符 逻辑运算的 官方案例 ...
  • 实例代码使用方法: 1.第一步:使用sencha cmd 创建项目 名称需要注意 输入为oaSystem 我使用的命令如下:sencha -sdk E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn ...
  • 本文地址: ...本文作者: sushengmiyan -------------------------------------------------------------资源链接---------...正在努力学习Extjs5学习进度比较慢,大家有好的学习方法的,多多贡献分享给小弟~感激不尽。
  •  让扩展extjs框架变得非常容易。Ext.Base是所有Ext JS类的构建块,原型和这个类的静态成员被其他类继承。 尽管你可以再低水平的情况下增加一个方法,但是开发人员在通常情况下会想通过高一点的继承链来开始。 下面这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,730
精华内容 1,092
关键字:

extjs5学习笔记