`
zch90s
  • 浏览: 727 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
文章分类
社区版块
存档分类
最新评论

ExtJS4 renderer将绑定的数据列进行格式化,但是没效果。。求解。。

阅读更多
Ext.define("GBApp.BrowseroptimizationApp.view.DetailGetlist", {
			extend : 'Ext.grid.Panel',
			alias : 'widget.detaillist',
			title : '详细信息',
			id : 'getDetailList',
			store : 'BrowseroptDetailStore',
			selType : 'checkboxmodel',// 设定选择模式
			multiSelect : true,// 运行多选
			columnLines:true,
			columns : [{
							text : "业务类型",
							dataIndex : 'frame',
							width : 80,
							lockWidth : true
						}, {
							text : "时间",
							dataIndex : 'ttime'
						}, {
							text : "LAC",
							dataIndex : 'lac',
							width : 60,
							lockWidth : true
						}, {
							text : "CI",
							dataIndex : 'ci',
							width : 60,
							lockWidth : true
						}, {
							text : "地市",
							dataIndex : 'city',
							width : 60,
							lockWidth : true
						}, {
							text : "SGSN IP",
							dataIndex : 'sgsnIp',
							renderer :  function(){
								alert("1111");
							},
					 		lockWidth : true
						},{
							text : 'SGSN名',
							dataIndex : 'sgsnName'
						},{
							text : "BSC/RNC",
							dataIndex : 'rncId'
						}, {
							text : "BSC/RNC名",
							dataIndex : 'rncName'
						}, {
							text : "BSCIP",
							dataIndex : 'bscIp',
							renderer :  Ext.util.Format.ip
						},{
							text : "PUC名",
							dataIndex : 'pcuName'
						}						
						,{
							text : "小区名",
							dataIndex : 'ciName'
						}, {
							text : "站型",
							dataIndex : 'ciStyle'
						}, {
							text : "网络类型",
							dataIndex : 'ratType',
							width : 60,
							lockWidth : true
						}, {
							text : "WAP12",
							dataIndex : 'wap12'
						}, {
							text : "3G终端",
							dataIndex : 'umtsTdd'
						},{
							text : "网关Ip",
							dataIndex : 'destIp',
							renderer : Ext.util.Format.ip
						},{
							text : "网关端口",
							dataIndex : 'destPort'
						},{
							text : '用户',
							dataIndex : 'imsi',
							width : 120,
							lockWidth : true
						},{
							text : "手机类型",  //
							dataIndex : 'mobileType'
						},{
							text : "失败原因",  //
							dataIndex : 'failureCause'
						}, {
							text : "原因建议",//
							dataIndex : 'causeOpinion'
						}, {
							text : "操作系统",
							dataIndex : 'os'
						}, {
							text : "客户端",
							dataIndex : 'clientSoft'
						},{
							text : '站址类型',
							dataIndex : 'totalCategory'
						},{
							text : '业务分类',
							dataIndex : 'subCategory1'
						},{
							text : '一级目录',
							dataIndex : 'subCategory2'
						},{
							text : '二级目录',
							dataIndex : 'subCategory3'
						},{
							text : '二级分类',
							dataIndex : 'subCategory4'
						},{
							text : '具体分类',
							dataIndex : 'category'
						},{
							text : "URI地址",
							dataIndex : 'uriMain'
						},{
							text : "终端类型",
							dataIndex : 'userAgent'
						},{
							text : "内容类型",
							dataIndex : 'contentType'
						},{
							text : "状态码",
							dataIndex : 'statusCode'
						},{
							text : "是否成功",
							dataIndex : 'success'
						},{
							text : "内容长度",
							dataIndex : 'contentLength',
							xtype : 'numbercolumn',
							format : '0',
							align : 'right',
							width : 60,
							lockWidth : true
						},{
							text : "HTTP长度",
							dataIndex : 'httpLength',
							xtype : 'numbercolumn',
							format : '0',
							align : 'right',
							width : 80,
							lockWidth : true
						},{
							text : "重选次数",
							dataIndex : 'flushCount',
							xtype : 'numbercolumn',
							format : '0',
							align : 'right',
							width : 80,
							lockWidth : true
						},{
							text : "时延",
							dataIndex : 'responseTime',
							xtype : 'numbercolumn',
							format : '0',
							align : 'right',
							width : 60,
							lockWidth : true
						},{
							text : "是否超时",
							dataIndex : 'timeOut'
						},{
							text : "速率",
							dataIndex : 'speed',
							align : 'right',
							width : 60,
							lockWidth : true
						},{
							text : "重传率",
							dataIndex : 'retransferCount',
							renderer : Ext.util.Format.percentage,
							align : 'right',
							width : 60,
							lockWidth : true
						},{
							text : "是否掉线",
							dataIndex : 'fallLine'
						},{
							text : "是否与无线侧失去联系",
							dataIndex : 'radioStatus',
							width : 200
						},{
							text : '起始文件',
							dataIndex : 'recordFileIndex'
						},{
							text : "结束文件",
							dataIndex : 'lastFileIndex'
						},{
							text : "帧号",
							dataIndex : 'frameNum',
							xtype : 'numbercolumn',
							format : '0',
							align : 'right',
							width : 60,
							lockWidth : true
						}												
						],
			dockedItems : [{
			            xtype : 'pagingtoolbar',
						store : 'BrowseroptDetailStore',
						dock : 'bottom',
						displayInfo : true	    
							}]
				
		});

 

以上是展示详情的js,需要对其中的ip列进行格式化后显示,格式化的方法是没错的,另外其他展示详情的js也是可以实现ip格式化的,但是这个js就是不行,我也比照了其他的js,没发现有什么不同的地方,这个问题困扰了半天了,还请各位大神能帮我看看,到底问题出在哪里了,有劳了,感谢~~

分享到:
评论

相关推荐

    extjs最简单的数据绑定和修改

    在“extjs最简单的数据绑定和修改”这个主题中,我们将探讨如何在ExtJS中实现数据的双向绑定以及如何进行数据的修改。 1. 数据模型(Model): 在ExtJS中,数据模型定义了数据对象的结构和属性。创建一个模型类,...

    EXTJS Javascript HTML 代码格式化 工具

    2. 快速格式化:只需一键操作,工具就能快速将整个文件或选定代码块按照预设规则进行格式化。 3. 高亮显示:通过颜色区分不同类型的元素,如关键字、字符串、注释等,提升代码可读性。 4. 代码折叠:允许折叠和展开...

    extjs 数据导出到Excel,数据列自选

    标题中的“extjs 数据导出到Excel,数据列自选”指的是使用EXTJS框架实现一个功能,让用户能够从Web应用中选择需要的数据列,并将这些选定的数据导出为Excel文件。EXTJS是一个强大的JavaScript库,专门用于构建富...

    基于ExtJS技术实现的DataGrid 动态数据绑定检索例子程序代码

    本示例程序代码是基于ExtJS技术实现的DataGrid动态数据绑定检索功能,它允许用户实时地从服务器检索和展示数据。 在DataGrid组件中,动态数据绑定是指将表格的数据源与服务器上的数据实时连接,当数据发生变化时,...

    extjs日期显示(如何转换日期格式)

    extjs 中显示日期时间的方法是在后台传递来的数据是 Date 类型的数据,并使用配置消息转换器对 responseBody 输出日期格式进行全局处理。同时,使用 SimpleDateFormat 的构造函数将日期格式数据转换为 UTC 标准时间...

    ExtJS的.NET控件_YuiGrid(数据绑定.同步_异步取值)

    - 对于异步取值,确保服务器端接口能处理JSON请求并返回正确的数据格式。 - 考虑使用缓存机制,提高数据获取速度。 - 适当使用事件监听器,增强用户体验,如加载完成后的回调函数。 通过理解并熟练运用YuiGrid的...

    ExtJS 使用grid显示数据

    5. **渲染器(Renderer)**:自定义单元格内容的显示方式,通过配置column的renderer函数,可以格式化数据显示,如日期、货币等。 6. **事件监听**:Grid支持多种用户交互事件,如itemclick、celledit等,可以绑定...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...

    Extjs4 grid使用例子

    总结来说,"Extjs4 grid使用例子"是一个实践教程,展示了如何在MVC架构下利用ExtJS4的Grid组件处理数据,实现数据的增删改功能。通过这个例子,开发者可以学习到MVC的设计理念,以及如何有效利用Grid组件提升Web应用...

    EXTJS4+STRUTS2+JAVA增删改查

    在本示例中,EXTJS4将负责前端的用户界面展示,包括表格显示数据、表单进行数据输入以及操作按钮(增、删、改、查)的交互逻辑。 STRUTS2是一个基于MVC设计模式的Java Web框架,它简化了模型与视图、控制器的交互,...

    extjs4中文文档

    3. **数据绑定**:EXTJS4支持双向数据绑定,使得视图与模型之间的数据同步变得简单,大大减少了手动更新视图的工作。 4. **高级表格和网格**:EXTJS4的GridPanel组件提供强大的数据展示和操作功能,支持分页、排序...

    ExtJs4.rar

    其次,数据绑定和模型层的强化是ExtJS4的另一大亮点。新版本引入了Model、Store和Proxy的概念,它们共同构建了一个强大的数据管理框架。Model用于定义数据结构和验证规则,Store则作为数据容器,负责加载、存储和...

    extJs3升级extjs4方案

    在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...

    Extjs4 桌面效果优化

    标题“Extjs4 桌面效果优化”指的是开发者对官方提供的ExtJS 4桌面主题进行了定制和改进,以满足更丰富的功能需求或视觉效果。通常,这样的优化可能包括以下方面: 1. **自定义图标和样式**:开发者可能更换了默认...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    Extjs4 图片浏览器

    这款图片浏览器利用了ExtJS4的组件化、数据绑定和事件处理等特性,为用户提供了一个交互性强、功能丰富的图片浏览体验。 在实现这个图片浏览器的过程中,开发者可能使用了以下核心ExtJS4组件和技术: 1. **Panel...

    ExtJS4 doc文档

    ExtJS4的数据管理是基于MVC(模型-视图-控制器)架构的,提供了一种结构化的方式来处理和显示数据。`Store`对象是数据的核心,它可以加载和存储数据,与视图进行绑定。此外,`Model`定义了数据字段和验证规则,而`...

    extjs4扁平化设计

    在本话题中,我们关注的是ExtJS 4中的扁平化设计,这是一项流行的设计趋势,旨在使用户界面更为简洁、直观和现代化。 扁平化设计的核心理念是去除冗余的装饰性元素,如阴影、渐变和纹理,以呈现出清晰、简洁的视觉...

    Extjs4的demo

    在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...

Global site tag (gtag.js) - Google Analytics