`
arlxy
  • 浏览: 38231 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

EXTJS4 组件创建

阅读更多

最近做的一个项目采用EXTJS4作为展现层,利用2天的周末时间看了一下EXTJS4的API,非常简单的重写了一个分页,先将方法介绍如下,如下看组件效果

 

 

 

首先看组件代码:

Ext.define('Ext.ux.CustomPaging', {
    extend: 'Ext.toolbar.Paging',
    requires: ['Ext.toolbar.TextItem', 'Ext.form.field.Number'],
    
    bStr:'',
    aStr:'',
    maxStr:'',
    minStr:'',
	initComponent : function(){
    var pageSizeItems = [
          this.bStr,
          {
				xtype: 'numberfield',
				cls: 'x-tbar-page-number',
				allowDecimals: false,
				allowNegative: false,
				enableKeyEvents: true,
				width: 75,
				maxValue: 100,
				maxText: this.maxStr,
				minValue: 1,
				minText: this.minStr,
				selectOnFocus: true,
				value: this.pageSize,
				submitValue: false,
				nanText:'\u8bf7\u8f93\u5165\u6570\u5b57',
				listeners: {
					scope: this,
					keydown: this.onHlPagingKeyDown
					//blur: this.onHlPagingBlur
				}
            },this.aStr
      ];
	 var userItems = this.items || [];
	 this.items = userItems.concat(pageSizeItems);
	 Ext.ux.CustomPaging.superclass.initComponent.call(this);
    },
	onHlPagingKeyDown: function(field, e){
        if(field.isValid()){
            var k = e.getKey();
			if(typeof(k) == "undefined" || typeof(k) == "null" || k == null || k == ""){
			    k = window.event.keyCode;
			}
			var r = e.RETURN;
			if(typeof(r) == "undefined" || typeof(r) == "null" || r == null || r == ""){
			    r = '13';
			}
             if (k == r) {
                    e.stopEvent();
                    this.pageSize = field.getValue();
                    this.store.pageSize = field.getValue();
                    this.store.proxy.extraParams['pageSize'] = field.getValue();
                    this.store.loadPage(1);
                    this.doRefresh();
             }
        }
    },
    onHlPagingBlur: function(field){
        if(field.isValid()){
            this.pageSize = field.getValue();
            this.store.pageSize = field.getValue();
            this.store.proxy.extraParams['pageSize'] = field.getValue();
            this.store.loadPage(1);
            this.doRefresh();
        }
    } 
});  

 如上为扩展组件,如果你想引入,则需要如下声明:

 Ext.Loader.setConfig({enabled: true});
 Ext.Loader.setPath('Ext.ux', '${ctx}/ext-4.0.0/ux/');
 Ext.require([
			    'Ext.grid.*',
			    'Ext.data.*',
			    'Ext.util.*',
			    'Ext.state.*',
			    'Ext.ux.ProgressBarPager'
			]);
			
			
Ext.onReady(function() {
});

 然后你可以去创建此对象:

var bbar= Ext.create('Ext.ux.CustomPaging', {
		            pageSize: 20,
		            store: store,
		            displayInfo: true,
		            displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
			    beforePageText:'第',
			    afterPageText:'页,共 {0} 页',
			    emptyMsg:'没有记录',
			    bStr:'每页',
			    aStr:'条',
			    maxStr:'每页不允许超过100条',
			   minStr:'每页不允许小于1条',
		            plugins: Ext.create('Ext.ux.ProgressBarPager', {})
	        });    

 最后,将bbar引用给GRID对象的bbar属性,如

bbar:bbar,

 使用EXTJS4的时候,发现一个BUG,就是如果你的STORE对象获取后台数据,如果为空,则渲染GRID时,会报错(这个BUG存在于IE6、7、8),我个人有一种解决方法,首先你定义的Model,需要增加一个额外的映射

 Ext.define('Task', {
	extend: 'Ext.data.Model',
        idProperty: 'root',
        fields: [
	    {name: 'noResult',mapping:'noResult'}, 







            {name: 'ratingId',mapping:'ratingId'}
        ]    
 });

 上面的 "noResult"为额外属性,用于区分是否存在列表数据,然后增加监听方法

var store = Ext.create("Ext.data.Store",{
	model: 'Task',
	autoLoad: false,
	remoteSort: true,
	pageSize: 20,
	proxy: {
	type: 'ajax',
	url: '${ctx}/customerDrain/getCustomerDrainListJSON.action',
	reader: {
	         type: 'json',
		 root: 'root',
		 totalProperty: 'totalProperty'
	},    
	extraParams:{pageSize:'20','customerDrainTO.branchCode':'',
                              'customerDrainTO.serviceUser':'',
                              'customerDrainTO.customerPackage':'',
                              'customerDrainTO.packageType':'',
                              'customerDrainTO.year':'',
                              'customerDrainTO.quarter':'',
                              'initFlag':Ext.getCmp('initFlag').getValue()}
        }
	,
	 listeners:{load:function(t,records,successful,operation){
		if(records.length == 1 && records[0].get('noResult')== 1){
			this.removeAll(false);
		}
	}}   





});		

  当然你后台封装数据,如果列表为空必须冗余此属性并赋值,如

//声明返回JSON对象
		JSONObject json = new JSONObject();
		json.accumulate("totalProperty", total);
		//声明JSON数组
		JSONArray jsonArray = new JSONArray();
		for(Object o:li){
			  //转换为JSON对象
			JSONObject j = JSONObject.fromBean(o);
			//添加的JSON数组
			jsonArray.put(j);
			
		}
		//屏蔽IE空列表BUG
		if("[]".equals(jsonArray.toString())){
			JSONArray jArray = new JSONArray();
			JSONObject j = new JSONObject();
			j.accumulate("noResult", 1);
			jArray.put(j);
			json.accumulate("root", jArray);



		}else{
			json.accumulate("root", jsonArray);
		}
		return json.toString();
 

 

分享到:
评论

相关推荐

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件(Model数据验证,数据交互) EXTJS4自学手册——EXT数据结构组件 EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的文章模块界面搭建 07.继续搭建我的文章模块,同时实现后台查询 08.实现添加文章功、优化代码 09.实现文章类别的选择、实现添加文章的后台功能 10.实现添加...

    Extjs4.0学习笔记

    xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经达到1MB的ext-all.js了,本文介绍如何在EXTJS4中创建一个window。 共:10 小节, ...

    Extjs4.1.1

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解Extjs的课程。课程从基础开始,配合项目实战应用,让用户在最短的时间内掌握Extjs的...

    深入浅出Extjs4.1.1

    4、ExtJS最常用的表单之textfield控件4 |4 ]8 ~/ d3 Y& k# X 5、ExtJs最常用表单组件Number、CheckBox、Radio* s, r% ~+ k; y# W 6、ExtJs最常用表单组件ComboBox、time、date 7、ExtJS面板Panel t1 E( w8 g6 ?/ L' ...

    extjs动态生成model、store、panel

    extjs动态生成model、store、panel;sql拼接等多种技术难点

    ExtJS快速入门指南

    javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    ExtJS(ajax框架) 4.2.1

    可以把ExtJS用在.Net、Java、Php等各种开发语言...全新的图表库:ExtJS4中, 全新的、插件自由的图表库是最激动人心的新功能之一,创建了饼图、线图、面积图、雷达图等等,所有这些都是动画的、易于配置的和可扩展的。

    Extjs 6.2 最新sdk ext-6.2.0-gpl.zip

    官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...

    ext-2.3.0 ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架

    ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。  ExtJs最开始基于YUI技术,由开发人员Jack ...

    ssh+extjs项目代码

    最近自己动手做了一个后台使用struts2+Hibernate+Spring 前台使用extjs的工程当作练习。...后续可以通过日期或者内容进行查询和修改。 主要的练习点在 1 SSH框架的搭建和使用;... 2 extjs组件化创建。

    【原创】基于Extjs4的城市选择器插件

    从外往里说,extjs所有的这种选择器都是继承自picker类,继承这个类实现一个重要的方法createPicker 方法,在这个方法里创建一个本选择器需要用到的组件,我这里创建的是tabpanel,tabpanel继承自Ext.tab.Panel这个...

    轻松搞定Extjs_原创

    第八章:Extjs组件结构 46 一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被...

    Extjs in action

    学习extjs最好的资料.内容包括:ExtJS 介绍,Ext 组件分析,创建一个可配置的综合组件等

    ExtJS 2.02版本

    ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs...

    2828-Extjs4.0学习笔记大全.pdf

    Extjs4,创建 Ext 组件有了新的方式,就是 Ext.create(....),而且可以使用动态加载 JS 的方式 来加快组件的渲染,我们再也不必一次加载已经达到 1MB 的 ext-all.js 了,本文介绍如何在 EXTJS4 中创建一个 window。

    精通JS脚本之ExtJS框架.part2.rar

    5.1.1 ExtJS组件结构 5.1.2 Ext.Component 5.1.3 Ext.BoxComponent 5.1.4 Ext.Container 5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert&#40...

Global site tag (gtag.js) - Google Analytics