`
wjm0729
  • 浏览: 15397 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

自己来封装Ext组件7--SteelComboGrid

阅读更多

 

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

声明一下下:

由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有BUG那是必须的,这里仅起到抛砖引玉的作用

如果有什么问题,大家可以联系我 wjm_0729@yahoo.cn  或直接评论, 谢谢!!

文章中后端技术是用的  Nutz  http://nutzam.com/  ---  除SSH之外的另一种选择  (打个小广告,哈哈!!)

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

 

Combobox Grid 多列显示

 

和上一个是一样的,照搬


 配置如下:

 

 {
 	xtype:'steelfield'
 	,type:'combogrid'
 	,fieldLabel:'下拉列表'
 	,name:'steelcombo1111'
 	,displayField : 'functionName'
	,valueField : 'functionId'
	//这个不是必须的-当要用到影藏列时,可以单独定义
 	,fields:[
 		'functionId', 'functionName', 'parent', 'type', 'sort', 'status'
 	]
 	,columns:[
		 {dataIndex:'functionId',	header:'ID'		,sortable:true }
		,{dataIndex:'functionName', header:'功能名称',sortable:true }  
		,{dataIndex:'parent',		header:'父节点'	,sortable:true }
		,{dataIndex:'type',			header:'类型'	,sortable:true}
		,{dataIndex:'status',		header:'状态'	,sortable:true }
		,{dataIndex:'sort',			header:'排序'	,sortable:true}
	]
	,paging:true
	,url:'Function/list'
 },

 

源码如下:

 

/**
 * 
 *     部分特定配置方法如下(其他的和ComboBox一样):
 *     ------------------------------------------
 *     如果需要对grid有特殊的配置,请使用 gridCfg 配置项
 *     url: 	[必须] 数据源url
 *     columns:[必须] grid的cm
 *     displayField : 	[必须] 显示对应的列 默认为 text
 *     valueField : 	[必须] 值对应的列 默认为 value
 *     paging: [可选] 是否分页 默认false不分页
 *     fields: [可选] store的数据列、默认是根据columns的dataIndex构造出了的
 *	   ------------------------------------------
 * @class Ext.SteelComboGrid 
 * 								依赖:Ext.SteelGridPanel 、 Ext.SteelGridSearchField
 * @extends Ext.form.ComboBox 
 */
Ext.SteelComboGrid = Ext.extend(Ext.form.ComboBox, {
    store : new Ext.data.SimpleStore({
                fields : [],
                data : [[]]
            }),
    editable : this.editable||false,
    mode : 'local',
    emptyText : this.emptyText||"请选择",
    allowBlank : this.allowBlank||true,
    blankText : this.blankText||"必须输入!",
    triggerAction : 'all',
    anchor : '95%',
    displayField : 'text',
    valueField : 'value',
    tpl : '',
    selectedClass : '',
    
    onSelect : Ext.emptyFn,
    
    loadingText: Steel.LOADINGTEXT,
    
    grid: null,
    /**
     * grid的配置参数【可选】
     * @type 
     */
    gridCfg:{},
    
    url: '',
    
    //grid 的 Store
    store1:null,
    
    paging:false,
    
    fields: [],
    
    columns: [],
	
	initComponent : function() {
		Ext.SteelComboGrid.superclass.initComponent.call(this);
		var me = this;
		this.tpl = "<tpl for='.'><div id='steel-"+this.getId()+"'></div></tpl>";
		
		//如果没有定义fields 按照columns初始化
		if(0==this.fields.length && this.columns){
			if(0==this.columns.length)console.log("请为"+this.getName()+"定义columns属性");
			Ext.each(this.columns,function(c){
				me.fields.push(c.dataIndex);	
			});
		}
		this.store1 = new Ext.data.JsonStore({
			url:this.url,
			root:Steel.JSONSTORE_ROOT,
			totalProperty:Steel.JSONSTORE_TOTALPROPERTY,
			fields:this.fields
		});
		
		this.listWidth = 500;
		
    	this.maxHeight = 300;
		
/*		this.grid = new Ext.grid.GridPanel({
				border: false,
				ds : this.store1,
				columns : this.columns,
				sm : new Ext.grid.RowSelectionModel({
							singleSelect : true
						}),
				title : '',
				height : 300,
				bbar : this.paging ?
						new Ext.PagingToolbar({
							pageSize : Steel.PAGESIZE,
							store : this.store1,
							displayInfo : true
						})
						:null
			});*/
			
		this.grid = new Ext.SteelGridPanel(Ext.apply({
			title: ''
        	,border: false
        	,height : 300
			,paging: this.paging
			,searchField:'local'
			,store: this.store1
			,colModel:new Ext.grid.ColumnModel(this.columns)
		},this.gridCfg));
		
        this.grid.on('rowclick', function(grid, rowIndex, e) {
        	var r = me.store1.getAt(rowIndex);
        	if(me.fireEvent('beforeselect', me, r, rowIndex) !== false){
	            me.setValue(r.data[me.valueField || me.displayField]);
	            me.collapse();
	            me.fireEvent('select', me, r, rowIndex);
	        }
        });
        
        this.on('expand', function() {
            me.grid.render('steel-'+me.getId());
            if(me.store1.getCount() == 0){
				me.grid.doLoad();
            }
        });
        
        this.onViewClick = function(doFocus){};
               
/*		this.itemSelector = 'tr.item';
		var t ='<table border=0 class="">'+
		    	'<tpl for=".">'+
		        	'<tr class="item">';
		            	Ext.each(this.fields, function(f){
		            	  t += '<td>{'+(f.name ? f.name : f)+'}</td>';
		            	});
		       t += '</tr>' +
		        '</tpl>'+
		       '</table>';
	    this.tpl = new Ext.XTemplate(t);*/
	}
	,getStore : function(){
		return this.store1;
	}
	,getGrid : function(){
		return this.grid;
	}
	,setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(Ext.isDefined(this.valueNotFoundText)){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        if(this.hiddenField){
            this.hiddenField.value = Ext.value(v, '');
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
        return this;
    }
    ,findRecord : function(prop, value){
        var record;
        if(this.store1.getCount() > 0){
            this.store1.each(function(r){
                if(r.data[prop] == value){
                    record = r;
                    return false;
                }
            });
        }
        return record;
    }
});

Ext.reg('steelcombogird', Ext.SteelComboGrid);

 

 

 

  • 大小: 110.2 KB
分享到:
评论
1 楼 yepingping 2013-12-28  
该控件Ext.SteelGridPanel 、 Ext.SteelGridSearchField对应的源码呢?

相关推荐

    封装ElementUI组件el-tree

    在给定的标题"封装ElementUI组件el-tree"中,我们聚焦于`el-tree`组件的封装,这通常是为了提高代码复用性、简化使用过程以及统一项目中的样式和行为。 `el-tree`是ElementUI中的树形控件,用于展示层次结构的数据...

    ext-cn-js-beta

    - **组件模型**:EXT JS的核心是组件化,它将页面元素抽象为组件,每个组件都有自己的属性、事件和方法,可以灵活组合和扩展。 - **布局管理器**:EXT JS提供了多种布局方式,如Fit、Border、Form、Table等,适应...

    EXT-In-FirstStep

    - EXT提供了便捷的方法来选择和操作多个DOM节点,增强了对页面元素的控制能力。 #### 2.3 响应事件 - 通过EXT,可以轻松绑定和处理DOM事件,使得响应用户交互更加灵活高效。 ### 使用Widgets #### 3.1 MessageBox ...

    中兴PCB元件封装库命名规范-IPC7351

    ### 中兴PCB元件封装库命名规范-IPC7351 #### 一、概述 本文档详述了中兴通讯股份有限公司发布的《印制电路板设计规范》中关于SMD(Surface Mount Devices,表面贴装元件)元器件封装库的尺寸要求与命名规范。该...

    vue之封装自己的日历组件-高级篇视频

    vue之封装自己的日历组件-高级篇视频 封装自己的组件

    Ext框架简介-Ext框架简介

    Ext 框架的核心组件包括adapter、build、docs、examples、resources、source 等。adapter 负责将里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext 所支持的底层库。build 是压缩后的 ext 全部源码。docs 是...

    Ext API详解--笔记

    7. **Ext.KeyNav, KeyMap, JSON, Format, DelayedTask, TaskRunner, TextMetrics, XTemplate**: `EXT核心API详解(七)-Ext.KeyNav KeyMap JSON Format DelayedTask TaskRunner TextMetrics XTemplate.txt`涉及键盘...

    el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf

    在给定的文件中,展示了如何利用Element UI库来封装`el-table`和`el-form`组件,这两个组件在管理系统的界面中非常常见,特别是用于数据展示和表单提交。 首先,我们关注`el-form`组件的封装。`el-form`用于创建...

    Python库 | git_ext-0.6.0-py2-none-any.whl

    例如,当用户通过前端提交代码更改时,后端可以利用`git_ext`来处理这些更改并更新远程仓库。 ### 总结 `git_ext-0.6.0-py2-none-any.whl`是一个面向Python 2的Git操作库,为开发者提供了一种更便捷的方式来处理...

    slide-ruler二次封装后的组件

    总的来说,"slide-ruler二次封装后的组件"是一个针对原生slide-ruler组件进行定制化开发的产品,它能够更好地适应特定项目的需求,提供更加个性化的用户体验。通过深入理解和利用"csRuler"文件,开发者可以轻松地将...

    【Vue2 + ElementUI】分页el-pagination 封装成公用组件

    总结来说,封装`el-pagination`为公用组件涉及的主要步骤有:创建新组件,引入并配置el-pagination,定义并接收props,处理事件,以及设置和使用语言包。通过这种方式,我们可以实现分页组件的复用,同时支持多语言...

    PyPI 官网下载 | abjad-ext-tonality-3.0.0a0.tar.gz

    今天,我们要探讨的是一个名为"abjad-ext-tonality"的Python库,它在PyPI(Python Package Index)官网上可以下载到的最新版本为3.0.0a0,封装在一个名为"abjad-ext-tonality-3.0.0a0.tar.gz"的压缩包中。...

    h264封装flv-----flv-muxer

    标题中的“h264封装flv-----flv-muxer”指的是将H.264编码的视频流封装到FLV(Flash Video)容器格式的过程。这个过程由一个名为“flv-muxer”的工具或程序来完成。在本文中,我们将深入探讨H.264编码、FLV容器格式...

    PCB封装之-HDR-各种单双排针排座(1.27mm、2.0mm、2.54mm,史上最全)

    各种单双排针排座封装(1.27mm、2.0mm、2.54mm间距),匹配伍尔特料号

    vue3企业级项目二次封装el-table、分页

    1、后台管理系统用到的表格、分页很多,所以不能每个页面都写一次,通过组件通讯方式封装 2、项目选型:vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧,了解 核心原理。全文极简备注...

    ext -jarext -jarext -jarext -jar第一部分

    在Java开发领域,`ext`和`-jar`是与JVM(Java虚拟机)启动相关的命令行选项,常用于管理类库和执行Java应用程序。`ext`是扩展目录的概念,而`-jar`用于指定运行包含`Main-Class` manifest的JAR文件。现在我们深入...

    extgrid 封装

    本文将详细讲解关于"ext grid 封装"的知识点,以及如何通过`grid.js`来实现UI的便捷调用。 1. ExtJS Grid组件: - Grid组件是ExtJS的核心组件之一,用于显示表格数据,支持排序、分页、筛选等多种功能。 - 它由一...

    Type-C、Micro USB接口封装及3D模型

    在电子设备领域,接口是设备之间传输数据的关键部分。...因此,熟悉这两种接口的封装和3D模型对于硬件工程师来说是非常必要的。通过掌握这些知识,你可以更好地理解和设计符合现代需求的电子产品。

    Delphi7.完美经典

    18-7 TDBLookupListBox与TDBLookupComboBox组件 18-8 TDBNavigator组件 18-9 TDBGrid组件 第19章 设计Delphi数据库报表 19-1 设计报表的基本观念 19-1-1 报表的组成 19-1-2 报表的主体组件——TquickRep 19...

Global site tag (gtag.js) - Google Analytics