`

Ext之自定义组件,之Render

    博客分类:
  • ext
阅读更多
/**
 * 数据字典 代码到名称的翻译
 * author zgl 2014-02-24
 * 
 * 【用法】
 * 定义   var cameraTypeRender = new  Ext.rtt.dictionary.RendererMultiple('com.rtt.emergency.resource.model.Carmera.typeId'); 
 * 
 * 使用   {
                header   : '类型', 
                width    : 50, 
                sortable : true, 
                dataIndex: 'typeId',
                align :'center',
                renderer:cameraTypeRender.renderer.createDelegate(cameraTypeRender)
            }
            
   【解释】 
   输入: 01,02
   输出: 水灾,火灾        
 */ 
Ext.rtt.dictionary.RendererMultiple = function(datatype){  
  	var storeObject = {};
	storeObject.autoDestroy = true;
	storeObject.autoLoad = true;
	storeObject.url = ContextPath + '/commplat/json_service.do';
	storeObject.root = 'root';
	var fields = 'id,name';
	var fieldsArr = fields.split(",");
	storeObject.fields = fieldsArr;
	//storeObject.fields=fields;
	
	var baseParams = {};
	baseParams.jsonlist = 'jsonlist';
	//add cyzhang 绕过session检查
	baseParams.bypass = 'true';
	baseParams.serviceClassName = 'com.rtt.platform.system.service.http.ListTypeServiceJSON';
	baseParams.serviceMethodName = 'getListTypes';
	baseParams.serviceParameters = 'type';
	baseParams.type = datatype;
	storeObject.baseParams = baseParams;
	Ext.rtt.dictionary.RendererMultiple.superclass.constructor.apply(this, arguments);
	
	this.store = new Ext.data.JsonStore(storeObject);
	var me1 = this;
	this.store.on("load", function(store, records, options ) {
		me1.fireEvent('load');	
			
		});
		
	this.store.on("loadexception", function(combobox, o, response, e) {
			var msgObj = Ext.decode(response.responseText);
			Ext.Msg.alert('错误', msgObj.msg);
		});
	//return this.store;
	//this.displayField = "dcName";
	//this.valueField = "code";
};

Ext.extend(Ext.rtt.dictionary.RendererMultiple, Ext.util.Observable,{ 	
  /**
   * 构造方法
   * @param config 配置信息
   */
  constructor: function(config){ 
    this.name = config.name;        
    this.addEvents({
          "load" : true,
          "loadexception" : true
      }); 
    //this.listeners = config.listeners;         
  },
  getStore :  function(){
    return this.store;
  },
  renderer :  function(v){
  	var displayText = '';
  	var vArray = v.split(',');
  	for(var i=0;i<vArray.length;i++){
  		var val = vArray[i];
  		var index2 = this.store.find('id', val);
  		var record = this.store.getAt(index2);
  		if(record != null){
        	displayText += record.data['name']+',';
      	}
  	}
	if(displayText != ''){
		return displayText;
	}
    return v;
      
   }
  
  });
  














-
分享到:
评论

相关推荐

    Ext 实现自定义控件

    在EXT JS中,自定义控件是通过...总之,EXT JS 提供了灵活的机制来扩展其内置控件,通过重载 `initComponent` 或 `constructor` 函数,开发者可以构建具有独特特性和功能的自定义组件,满足各种复杂的应用场景需求。

    Ext表单组件之textField

    本篇我们主要关注"Ext表单组件之textField",它是最基础也是最常用的输入控件,用于接收用户的文本输入。 一、Ext.form.TextField简介 Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行...

    ExtJs 带清空功能的日期组件

    通过自定义组件并扩展基础功能,我们不仅满足了项目需求,还增强了用户体验。这个自定义组件可以复用在项目的各个部分,提高代码的可维护性和一致性。 在实际应用中,可能还需要根据项目需求对组件进行更复杂的定制...

    【Ext2.0】只有月份的日期控件

    这个自定义组件Ext.ux.MonthPicker.js,是基于Ext JS 2.0实现的,它简化了日期选择的过程,仅展示月份列表,让用户能快速地选择一个特定的月份,而无需关心具体的日期。这种控件通常适用于那些只关注月份范围,而不...

    Openlayers扩展插件ol-ext ,2022年4月版本v3.2.23

    此外,还支持自定义SVG图形,使开发者能够创建独特的地图标记。 2. **互动控件**:ol-ext提供了各种交互控件,例如量角器、测距工具、轨迹记录器等,增强了用户的地图交互体验。这些控件可以帮助用户测量地图上的...

    Ext 3.0 中文文档.zip

    四、Grid:Grid是Ext最常用的组件之一,用于展示表格数据。它可以处理大量的数据,支持行选择、排序、分页、列调整等功能。Grid的灵活性在于可以通过配置定义列的类型和行为,如使用模板渲染单元格内容,或者添加...

    Ext2.1API中文文档

    开发者可以通过扩展或配置这些基础类来创建自定义组件。 标签“源码”意味着文档可能包含对源代码的深入解析,帮助开发者理解框架内部的工作原理。通过阅读源码,开发者可以学习如何优化性能,解决特定问题,或者为...

    Ext常用属性总结

    3. **renderTo** - 指定组件应渲染到哪个DOM元素。如果没有设置,组件会被添加到最近的父容器中。 4. **width** 和 **height** - 设置组件的尺寸。可以是具体的像素值,也可以是百分比。 5. **flex** - 在布局管理...

    ext 编程开发指南

    ### ext编程开发指南 #### EXT简介与基本概念 ...这只是冰山一角,更多高级特性如自定义组件、复杂布局管理等将在后续的学习过程中逐渐揭开面纱。希望这份指南能帮助你更好地入门EXT,开启JavaScript开发的新篇章。

    ext-word文档

    通过研究源码,可以学习到如何扩展和自定义组件。 #### 核心Core `Core`模块包含了ExtJS中最基础的功能,如DOM操作、事件处理等。这些功能为整个框架提供了坚实的基础。 #### Javascript中的作用域(scope) 作用...

    软件开发中的.ext实例

    在这个版本中,EXT提供了更多的组件选项,如表格、菜单、窗口、表单等,这些组件都经过精心设计,具有高度自定义和交互性。EXT的组件化设计允许开发者通过组合各种预定义的UI元素来快速构建复杂的用户界面,同时保持...

    editTreeGrid ext可编辑的treegridpanel

    renderTo: Ext.getBody() }); } }); ``` 其中,`myTreeStore`应是一个配置了数据源的EXT JS Store。 通过理解并运用上述知识点,你可以在EXT JS应用中创建出功能强大、易于使用的可编辑TreeGrid面板,满足...

    ext 双层表格 grid(附带图片)

    EXT JS的Grid组件是实现这一功能的主要组件,它允许开发者以清晰、交互的方式展示复杂的数据结构。以下是对EXT JS双层表格(grid)的知识点详细解析: 1. **EXT JS Grid组件**: EXT JS Grid组件是一个高度可配置...

    Ext 带多选的Tree

    renderTo: Ext.getBody(), checkboxModel: { threeState: true // 默认为false,开启三态复选 }, ... }); ``` 2. **复选框行为**:可以通过`checked`属性控制节点的选中状态,`checkChange`事件监听节点选中...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    Ext3 查询框

    Ext3 查询框是一种在Web应用中常见的用户交互组件,它主要用在EXT JavaScript库中,EXT是一个用于构建富客户端Web应用的开源框架。EXT3是EXT库的一个版本,它提供了丰富的UI组件和数据绑定功能,使得开发者能够创建...

    如何使用ext写的树形菜单

    renderTo: Ext.getBody() // 渲染到页面body中 }); ``` 3. **定义数据源(Store)** 树形菜单的数据通常通过`Ext.data.TreeStore`来管理。每个节点是一个`Ext.data.Model`对象,包含字段和子节点。例如: ```...

    EXT中FCK的使用

    在EXT中使用FCKeditor,你需要创建一个自定义组件。这通常涉及到继承EXT的基础组件类,然后在`render`方法中初始化FCKeditor实例。代码可能类似于: ```javascript Ext.extend(MyFCKComponent, Ext.Component, { ...

    Ext树创建说明.rar

    renderTo: Ext.getBody() }); } }); ``` 在这个例子中,我们首先创建了一个TreeStore,定义了NodeModel模型,并在root中添加了两个子节点。然后,我们创建了一个tree面板,设置了其宽度、高度、存储和渲染位置。...

Global site tag (gtag.js) - Google Analytics