Ext js 应用例子

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <link href="Default.css" rel=…

Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者Jack Slocum(杰克.斯洛克姆)打算对基于BSD协议的Yahoo User Interface (YUI)库进行自定义的扩展,但后来一度风头盖过其父辈YUI: 在2006年底,YUI-Ext被简化为Ext,反映了它作为一个框架的成熟和独立.该公司成立于2007年初,Ext现在为双执照,使用LG…

Ext JS - 问答

Ext JS - 问答在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们知道! 注意: 下面的FAQ如果没有特别说明,适应于 Ext 5和更高版本. Ext JS 都支持哪些浏览器? 桌面浏览器 IE8+ (只适用于标准模式) Firefox (PC 和苹果电脑) Safari 6+ Chrome (PC 和苹果电脑) Opera (PC 和苹果电脑) 触屏设备 Saf…

Ext JS 4 老特征：statics 静态的变量和方法

l 一.静态的变量和静态的方法 [译文原创Learning Ext JS 4 第51页] Statics的方法只属于类本身,而不属于任何一个实例,这就决定了我们是在定义类的内部来用statics方法的,而不是在某个实例中. 现在,我要建立一个在银行排队叫号的类,排队的人就象是在流水线上一样,每个人都有一个不重复的顺序号,代码如下. //定义一个客户类,只需要顺序号,别的什么也不需要. Ext.define('MyApp.data.Client',{ statics : { …

Ext JS 4 新特性2：配置项属性（config）之二

Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序的时候,使用setter和getter方法就可以传递一些configuration参数,还可以改变这些参数.当在config声明中定义某某配置项属性的时候,Ext JS 4将会自动地生成与属性紧密相关的4个方法:getter,setter,reset和apply. 让我们在MyApp.MyWindo…

在Ext JS 5应用程序中如何使用路由

简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录.前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了. Ext JS 5路由在Ext JS,已经可以使用Ext.util.Histroy类来处理历史记录的变化,但在Ext JS 5,这个处理变得更容易…

Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法最近在适用Ext JS4开发应用用的时候遇到了一个问题,前后考虑了很久并上网搜索了很多相关问题,都没有发现类似的问题的解决答案.今天早上过来上班的时候,突然想到了解决办法,现在拿出来给大家分享.虽然不是什么出众之比,但是希望在大家遇到这个类似的问题的时候有了参考. 问题描述:我做的一个应用类似于官方http://docs.se…

【转载】《Ext JS 4 First Look》翻译之一：新特性

免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:^_^肥仔John 原文地址:http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html 第一章新特性 Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,…

[Ext JS 4] 实战之Grid, Tree Gird 添加按钮列

引言贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮不尽相同, 根据每一行的数据不同,显示的按钮不同,对应的点击操作也不同. 解法针对以上需求1 , 很容易就可以解决. Ext JS 的Grid 有提供 Ext.grid.column.ActionView xtype: actioncolumn 这样的列. 只需要在grid panel 的co…

[Ext JS 4] 实战之Grid, Tree Gird编辑Cell

前言本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onReady(function(){ var treeStore = Ext.create('Ext.data.TreeStore', { fields: ['id','name','sex','age'], root:{ "children":[{id:'001',name:'shu',sex:'…

[Ext JS 4] Grid 实战之分页功能

前言分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需分批取. 另一种是客户端分页方式, 一次性从服务端取回所有的数据在客户端这边实现分页.这种自然适合数据量较少的状况,减少和服务端的交互, 对性能有一些帮助.这种方式还有一种好处就是对于初学Ext JS Grid 或分页功能比较简单和直观了. Ext 目前的官方文档中,对于客户端分页的方式介绍和实例不…

【翻译】十大要避免的Ext JS开发方法

原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean Lanktree Sean is an Ext JS Professional Services Lead at CNX Corporation. 在CNX,尽管大多数的Ext JS开发工作需要从0开始创建新的应用程序,偶尔会有客户让我们帮他们解决内部工作上的性能问题.臭虫和结构性问题.我们以“清洁工”这种角色进行工作已经有很…

[Ext JS 4]性能优化

一般的优化技巧 1. 检查你定义的时间监听器正确的设置事件监听器对性能会有很大的影响. 举例来说, 在定义一个store的时候,设置一个load 的事件去触发从后台读取数据,如果设置single 的值为true的话,则load的事情就只有在第一次取数据的时候会触发了. listeners: { load: onFirstLoadData, single: true } 给一个完整的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Trans…

[Ext JS 4] 实战之 Picker 和 Picker Field

前言所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext js中综合起来使用的方式就是, 在 form 里添加一个picker 类型的 field, 这个field比较特殊的是有一个点击按钮, 点击之后可以弹出一个选择框, 在选择框里选中的值添入filed 中. Ext JS 中的Picker Ext JS 目前的版本有三种选择器 1. Date (E…

[Ext JS 4] contentEL,renderTo, applyTo 释义与区别

前言若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS 4不向下兼容. Ext JS 4 开始收费了. 基于这些,对Ext JS 4一直就望而却步.也曾转向使用dojo. 但是对Ext JS 4 的新的平板风格和一些性能上的考量之后,还是决定使用Ext js 4. 在升级结束之际,总结一些主要的改变和应对之策. 创建组件方法 new Ext.XXX ==…

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南前言本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.…

【翻译】Ext JS最新技巧——2015-10-21

原文:Top Support Tips Kevin Cassidy:全宽度的字段错误信息有考虑过让验证信息显示在表单字段的下面(msgTarget:'under'),但最后发现验证信息被压缩显示了吗?这是因为该方式显示的信息只会显示在输入自动的下面.还好,这里有一个简单的方式来解决这个问题,以便使用字段与标签合起来的整个宽度. 要实现该视觉效果,重写错误信息的样式就行了.要将这个应用到字段的单一实例,只需要将以下cls值添加到字段就行了: { xtype: 'numberfield', cls…

谈谈Ext JS的组件——组件基类：Ext.Component

概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基本功能,其实还包含了很多东西.当然,在API中不可能面面俱到,那么,我们应当如何去理解这个组件基类呢? Ext.Component===DIV 如果将一个Ext.Component渲染到页面,会看到该组件会简单的在页面中添加一个DIV标记,就是这么简单.也就是说,Ext.Component就相当于一…

将Ext JS 5应用程序导入Web项目以及实现本地化

在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦.而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题. 将Ext JS 5应用程序导入Web项目在Ext JS 5,会使用bootstrap.js来加载应用程序脚本和样式,而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的.问题就在这个Bootstrap.json文件上,如果是使用IIS的Web项目,首先会碰到的问题是Web服务器不允许下载JSON文件…

【翻译】Ext JS 5的平板支持

原文:Ext JS 5 Tablet Support Ext JS已被公认为桌面Web应用程序的领先框架.自从平板开始在全球挑战PC的销售,无论是个人还是企业,电脑横向的应用已经产生急剧的变化.Sencha意识到了这种变化,并推出了包含新功能和进行优化了的Ext JS 5.Ext JS从Sencha Touch 2学到了一些新把戏.多年最好的移动Web应用程序框架经验的沉淀要应对现代平板电脑上的桌面显示,那是卓卓有余的.通过类系统.事件管理.窗口小部件和新的部署选项就可以了解到这些更新. 除了能…

【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析.虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常用…

【翻译】在Ext JS 5应用程序中如何使用路由

原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录.前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了. Ext JS 5路由在Ext JS,已经可以使用Ext.…

【翻译】Ext JS——高效的编码风格指南

原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字来创建一个组件或类的实例是一种错误的做法,因为这没有遵循组件的生命周期.应该使用Ext.create方法来创建对象,例如: 错误: var obj = new Ext.panel.Panel(); 正确: var obj = Ext.create('Ext.panel.Panel'); 初始化直接量:不要直接…

Ext Js v6.2.0.103 Sencha Cmd 命令

Sencha Cmd v6.2.0.103 Sencha Cmd 提供几种全局开关命令. 在大多数案例中, 第一步是在Sencha SDK基础上创建应用例如 Ext JS 或 Sencha Touch: sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp Sencha Cmd 支持 Ext JS 4.1.1a 及更高版本 and Sencha Touch 2.1及更高版本. 使用帮助命令获取帮助: sencha help gen…

ext.js的mvc开发模式详解

ext.js的mvc开发模式详解和环境配置在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护:这就是Extjs MVC开发模式的初衷. 找了很多博客才找到能让新手也容易理解的从传统的html,css,js引入的…

几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

AJAX是web2.0的基石,现在网上流行几种开源的AJAX框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用那个框架? 让我们来想想选择AJAX框架的基础: 你的项目需求(即你需要哪些特性,例如是否要求做出精美的界面.特效或其它功能)是否支持A等级的浏览器(IE, Firefox等)?文档的质量:是否完善(包含教程,API,代码示例等)框架的可扩展性如何?为框架写插件容易吗?你是否喜欢它的API的风格?能大多程度上统一你的JavaScript…

Ext JS 4 的类系统

前言我们知道,JavaScript中没有真正的类,它是一种面向原型的语言 .这种语言一个强大的特性就是灵活,实现一个功能可以有很多不同的方式,用不同的编码风格和技巧.但随之也带来了代码的不可预测和难以维护等问题.代码量很大时,由于JavaScript 没有统一的结构,代码变得很难理解和阅读,不方便维护和重用. 而像C#这种基于类的面向对象语言,它是强类型的,具有封装.继承和多态的OOP基本特征,而且都有标准的编码约定.它通过强制开发者遵循一系列的原则,让编写的代码更具有可预测性和可扩展性等优点…

Ext.Js核心函数( 三)

ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode函数5.Ext.each函数6.Ext.util.Format对数据进行格式化7.Ext.util.TaskRunner8.update方法局部更新网页内容 Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM.得到当前文档中的组件.得到Ext元素等,在使用中要注意区别使用 1.g…

整合 Ext JS 和第三方类库

介绍 ExtJS提供了许多高度可定制化内置组件.如果它不在框架(framework)里面,你可以很容易的扩展这些类,或者浏览Sencha市场(Sencha Market) 寻找你可能需要的任何东西.那些都在大部分的时间里运行得很好,但是有时候你兴许想要使用一些不是使用ExtJS的组件系统构建的第三方库.有很多方法可以帮助你解决这个问题,而最简单的一种方法是创建一个定制的封装组件,用来处理你的这个库,这样它就可以在你的应用中重用了. LeoXu翻译于 2天前 0人顶顶翻译的不错哦! 实现概述…

十大要避免的Ext JS开发方法

原文地址:http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/ 作者:Sean LanktreeSean is an Ext JS Professional Services Lead at CNX Corporation. 在CNX,尽管大多数的Ext JS开发工作需要从0开始创建新的应用程序,偶尔会有客户让我们帮他们解决内部工作上的性能问题.臭虫和结构性问题.我们以“清洁工”这种角色进行工作已经有很长…