前言:EXT由多个组件组成,每个组件可配置多个子组件(items),而每个子组件也可嵌套多个子组件(items)--给人一种子子孙孙无穷匮也的印象,这对于初学者引来一个很重要的问题,特别是阅读他人编写的代码中在items的子组件并没有指定xtype时,那么你就无法得知作者所编写的这些子组件的配置项是从哪儿找的.因此,只要知道了items的子组件的xtype,那么自己在编写代码时就可以根据需求到API上去查询进行配置而不仅仅只是copy.这个对于EXT的老鸟来说可能不是什么问题,可对于我来说却困扰…

前言:EXT的API可谓熟悉EXT的葵花宝典,会看API可谓对于配置EXT,学习EXT最重要的基本功,这点相对于学习轻量级的Easyui来说更加明显. 比如下面的一段代码:注:在Ext.grid.EditorGridPanel中(3.4版本) tbar : [{//此项可以是Ext.Toolbar的实例.工具条的配置对象,或由按钮配置项对象构成的数组.默认是按钮配置项对象. id:'handleDel2', text:'导入二级域名', tooltip:'导入二级域名,请确保模板中的内容的正确性…

EXT模拟了OPP的思想,因此很多问题可以像JAVA语音那样去思考它.在实际阅读EXT时,常常需要我们搞清楚某个函数.某个对象的归属.如某个参数变量.方法属于哪个类,如下: 这是我今天在群中发出的问题,不过没人回答,然后在调试状态中,我自己试出了一个方法,终于搞清楚这个很长时间困扰我的问题了.如下: handler函数的实参g调用getXType方法获取到它的xtype. 实际上,在EXT的API中,我们所熟悉的formPanel.gridPanel均有这个方法:(相信所有EXT的Commpon…

xtype Class ------------- ------------------ box Ext.BoxComponent button Ext.Button buttongroup Ext.ButtonGroup colorpalette Ext.ColorPalette component Ext.Component container Ext.Container cycle Ext.CycleButton dataview Ext.DataView datepicker Ext.D…

今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这样虽然实现了,但是多写了不少代码,之后网上找到了方法. 代码如下:请结合昨天的代码看,否则你是看不明白的 /*我们操作查询的功能键是放在grid的tabbar中的,下面就是创建的grid的tabbar,其中查询操作就在其中,此代码紧接上一篇文章,这个类上一篇文章中也有,但是没有实现查询功能,红色字体…

Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法: var gfxmComb = new Ext.form.ComboBox({ id : 'gfxmComb', store : gfxmStore, typeAhead : true, mode : 'local', editable : true, displayField :'xmMc', valueFiel…

概述 前两篇分别介绍了Ext.NET-基础 和 Ext.NET-布局,从本篇开始我们尽量做一些实际工作中用到的例子. 在Ext.NET官方示例中,关于GridPanel的例子是最多的(近百个),篇幅所限,我们这里只介绍一些常用的功能,包括页面布局.新建.编辑.查询.删除.排序.分组.统计等功能. 示例代码下载地址>>>>> 页面总体布局 首先,再来熟悉下前一篇Ext.NET-布局篇中提到的布局技术. 新建WebForm页面,在ASPX文件中加入如下代码: <%@ Pag…

//支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: 'Ext.form.field.Text', alias: 'widget.uxSearchfield', defaultBindProperty: 'store', mixins: ['Ext.util.StoreHolder'], triggers: { clear: { weight: 0, c…

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

原文地址: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常用开发基础知识 组件定义 //这种方法可以缓存所需要的组件 调用起来比较方便(方法一 ) Ext.define('MySecurity.view.home.HomePanel', { //添加需要使用的组件 requires:[ 'MySecurity.store.home.AuthorityStore' ], //继承的组件 extend: 'Ext.panel.Panel', layout:'fit', //自定义一个xtype 供创建 或者起识别作用 xtype: 'homePan…

原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已经变得越来越复杂.虽然可以使用CSS响应这些环境条件,但典型的,如Ext JS应用程序这样,还是要包含大量的Javascript.在某些情况下,使用javascript来针对设备细节进行编码可能很简单,但也可能很快就会失控.好消息是,在Ext JS 5.1,提供了几个功能强大的工具来管理这种复杂性.…

FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有子组件宽度为100px. fileUpload: true//显示文件上传组件,如果指示了此项,则必须在items子组件数组中注册一个xtype为"fileuploadfield"的子组件 items : [ {} , { }]//添加表单子控件 buttons : [ {} , {} ]…

原文地址: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开始创建新的应用程序,偶尔会有客户让我们帮他们解决内部工作上的性能问题.臭虫和结构性问题.我们以“清洁工”这种角色进行工作已经有很长…

第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.height高 frame : Boolean 是否填充渲染gridpanel forceFit : true 列是否自动填充 store : store 数据集 tbar: [] 头部工具栏 dockedItems : Object/Array 可定位的停靠工具条(上.下.左.右) selType…

效果图如上: 页面代码: Ext.QuickTips.init(); //放在图标上会自动提示信息 Ext.define('ExtApp.view.StudentList' , { extend : 'Ext.grid.Panel' , id : 'StudentListGrid' , xtype : 'StudentList' , store : 'StudentList' , draggable:false, //设置为false则禁用拖拽改变列顺序. columnLines:true,//…

今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致,而我自己也不是很清楚使用这两个属性时的最佳方法.因此在回家后整理出了这样一篇文档.一方面用来标准化我们自己的代码,另一方面也共享给大家,毕竟对这两个属性进行详细讨论的资料几乎没有. xtype 首先来看看xtype的定义.在ExtJS的官方文档中是这样对它进行定义的: This property provides a shorter alternative to creat…

在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoad(),等方法都可以对数据进行重新加载,在这篇博文中,主要来阐述如何动态加载Toolbar. 实现动态的加载Toolbar,首先必须知道,Toolbar是加载在panel上的,可以根据,重新加载Panel来进行增加,但是,不管是对于性能或者是代码的维护上来说,这种方式肯定都是不可取的. 接下来进入正…

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息. 一.Ext.toolbar.Toolbar…

概述 前一篇介绍了Ext.NET基础知识,并对Ext.NET布局进行了简要的说明,本文中我们用一个完整的示例代码来看看Ext.NET的布局. 示例代码下载地址>>>>> 本文目的 本文使用Tree.Grid应该是我们最为常用的控件,实现自适应的页面布局, 顶端:使用Panel,可折叠: 左侧:使用TreePanel,可折叠; 中间:使用GridPanel,主要区域,不可折叠: 底部:使用GridPanel,可折叠: 先看看我们最终实现的效果 整体布局 全部折叠后的效果 当点击…

Ext.GridPanel 用法总结(一)—— Grid基本用法 摘自:http://www.cnblogs.com/luluping/archive/2009/08/01/1536645.html GridPanel类是基于基础列表接口具代表性的主要实现类.也是最常用的Ext组件之一. 一:首先定义grid的数据源 view plaincopy to clipboardprint? //初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不会保存当前的状态,而是重…

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3…

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar…

在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图并减少自定义组件的样板代码. 注意:文章假设你使用的是Ext JS 5.0.1或更高版本. 什么是声明式事件监听? 所谓的“声明式事件监听”,就是指定义在类主体中的监听或在实例的配置对象中使用了listeners配置项.以这种方式来声明事件监听不是Ext JS 5的新功能.在Ext JS 4,可以正在类中声明…

转载自:http://blog.csdn.net/itlwc/article/details/7878002 1.创建一个简单工具条效果图 <script type="text/javascript" defer> Ext.onReady(function(){ // 创建带三个按钮的工具条 var tb = new Ext.Toolbar({ width : 300, items : [{ text: '新建' },{ text: '修改' },{ text: '删除'…

<script type="text/jscript"> var WinXianCode; function SearchGetXianLuF(Type) { if(!WinXianCode) { //创建窗体框 WinXianCode=new Ext.Window({ id:'WinXianCode', width:, height:, closeAction:'hide', autoScroll:true, model:true, items : [ new Ext.f…

1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() and fadeOut() example</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <st…

本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusbar.StatusBar用来展示当前的状态信息. 一.Ext.toolbar.Toolbar 工具栏控件可以被附加在面板.窗口等容器类控件中,可以在四个方位添加多个工具栏控件.我们演示多个Ext.toolbar.Toolbar控件,然后附加到面板的不同位置. 1.在工具栏上添加菜单.按钮.搜索功能 我…

本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他html的信息:通过设置contentEl就可以获取其他html的信息为当前tab正文. 3.读取服务端数据:通过定义autoLoad异步方式获取服务端数据. 另外,每个tab都可以设置是否可关闭,进入tab时的事件,以及tab是否可用,具体情况请看代码: [html] <h1>基本选项卡<…

本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下面介绍几个基本配置项: 1.title:设置面板标题文本. 2.tbar,lbar,rbar,bbar:分别设置上.左.右.下四个部位的工具栏. 3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件. 4.buttons:设置按钮区的按钮. 下面看看面板生成代码:…