0 0

如何把服务器端返回的json数据与extjs组件的渲染器函数(renderer)关联起来?0

1.服务器端代码
private <T extends IOrderSupported> String service(IOrderService<T> svc, T form, String error) throws Exception{
		SalesOrder var=OrderMngr.get(form.getOrdId());
		if(isAuthorized(var)){
			svc.service(var, form, request);
			json=JsonEncodeType.OBJECT.encode(var);
			return SUCCESS;
		}
		return error;
	}


2.  js代码
//如果客户留言,则添加html代码;如果ppet留言,则不添加html代码
function renderLastUpdate(val,x,store){ 
    var r=renderers.lastUpdate(val,x,store);
    if(store.data.userType=="C"){
        r+="<br/><img src='/img/new2_4.gif' title='New remark'/>";
    }
    
    return r;
}
var columns=[
	{header: "流水号",dataIndex: "ordId",hidden:true},
	{header: "订单号",dataIndex: "orderNo",renderer:renderCode,sortable:true},
	{header: "国家",dataIndex: "nation"},
	{header: "客户号",dataIndex: "custId",hidden:true},
	{header: "客户",dataIndex: "custCode"},
	{header: "客户名称",dataIndex: "custName",hidden:true},
	{header: "客户类别",dataIndex: "custCate",hidden:true,renderer:renderCate},
	{header: "货币",dataIndex: "currency"},
	{header: "汇率",dataIndex: "crRate", renderer: Ext.util.Format.numberRenderer('0,0.00'),hidden:true},
	{header: "日期格式",dataIndex: "dateFormat",hidden:true},
	{header: "联系人",dataIndex: "linkman"},
	{header: "状态",dataIndex: "status", renderer:renderState},
	{header: "数量",dataIndex: "qty"},
	{header: "净金额",dataIndex: "netAmount", renderer: Ext.util.Format.numberRenderer('0,0.00')},
	{header: "附加费用",dataIndex: "additionalCost", renderer: Ext.util.Format.numberRenderer('0,0.00'),hidden:true},
	{header: "运费",dataIndex: "deliCost", renderer: Ext.util.Format.numberRenderer('0,0.00'),hidden:true},
	{header: "退款订单",dataIndex: "retOrderNo",hidden:true},
	{header: "退款额",dataIndex: "retCharge", renderer: Ext.util.Format.numberRenderer('0,0.00'),hidden:true},
	{header: "折扣",dataIndex: "discountAmount", renderer: Ext.util.Format.numberRenderer('0,0.00'),hidden:true},
	{header: "总金额",dataIndex: "amount", renderer: Ext.util.Format.numberRenderer('0,0.00')},
	{header: "备注",dataIndex: "remarks"},
	{header: "订单日期",dataIndex: "orderDate", renderer: Ext.util.Format.dateRenderer('Y-m-d')},
	{header: "下单者",dataIndex: "issuer"},
	{header: "编辑者",dataIndex: "editor",hidden:true},
	//{header: "最近更新",dataIndex: "lastUpdate", renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), sortable:true},
	{header: "最近更新",dataIndex: "lastUpdate", renderer: renderLastUpdate, sortable:true}, //1.表格面板的列:添加渲染器(函数)
	{header: "删除",dataIndex: "ordId",hidden:true,renderer:renderers.erase}
];



-----------------
【问题】
1.var实体对象和json对象的userType属性都有值;
2.现在就是,属性的值《——》面板表格的值,这2者怎么关联起来呢?(渲染器函数不是自动执行的么)






补充:
1.

function renderLastUpdate(val,x,store){   //【调试时】当java代码执行完毕,js里设置的断点都没有执行?

  var r=renderers.lastUpdate(val,x,store);

    if(store.data.userType=="C"){
        r+="<br/><img src='/img/new2_4.gif' title='New remark'/>";
    }
   
    return r;
}

2.如果只是单独设置js代码里的断点:当刷新后台相应的页面时,下面代码里的判断语句始终是假,也就是说服务器端的json对象的数据没有映射到store.data.userType,如何才能映射呢?

function renderLastUpdate(val,x,store){
    var r=renderers.lastUpdate(val,x,store);
    if(store.data.userType=="C"){ //1.执行到这一行的时候,判断语句始终为假
        r+="<br/><img src='/img/new2_4.gif' title='New remark'/>";
    }
   
    return r;
}


(截图:面板的最后一列~)





2013年10月14日 13:02
  • 大小: 47.5 KB
目前还没有答案

相关推荐

    ExtJs 2.0 GridPanel+Struts2 with JSON plugin[更新代码]

    7. **动态加载数据**:如果数据量庞大,可以使用 ExtJS 的 remoteSort 和 remoteFilter 特性,让服务器端负责数据的排序和过滤。 8. **自定义渲染**:对于某些列,可能需要自定义单元格的显示方式,可以使用 ...

    extjs模拟excel表格

    ExtJS 提供了Store组件,可以绑定到各种数据源,如JSON、XML或Array。数据可以通过Ajax请求加载,也可以手动填充。 2. **列配置**:GridPanel的列可以通过配置项定义,包括列名、宽度、对齐方式、排序和过滤等。...

    Ext tree json Demo

    服务器端返回JSON数据,客户端通过Ajax请求获取这些数据,并动态地在树中创建或更新节点。 在"Ext tree json Demo"项目中,你可以期待看到以下关键知识点: 1. **配置异步加载**:通过设置`async: true`属性,使...

    Extjs中文教程

    - 用于解析服务器返回的数据,并将其转换为Extjs可以使用的格式。 - 支持多种数据格式,如JSON、XML等。 - **Ext.data.Store类** - 存储和管理数据的核心组件,相当于一个小型数据库。 - 可以通过配置数据源、...

    ExtJs中处理后台传过来的date对象显示到页面上

    在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型...

    EXTJS 动态生成下来树形框

    为了实现树形结构,需要设置`queryMode`为`local`或`remote`,并定义`renderer`函数来渲染树形结构。 4. **扩展下拉框**:EXTJS允许我们自定义组件,可以通过继承`Ext.form.field.ComboBox`并重写相关方法,比如`...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    8. **自定义列格式**:如果需要自定义列的显示方式,可以定义`renderer`函数,它会在数据渲染到网格之前被调用,允许对数据显示进行格式化。 9. **性能优化**:为了提高性能,通常会使用服务器端分页,而不是一次性...

    ExtJS 制作个性表格

    数据通常从服务器端获取,我们可以通过Ajax请求加载到`store`中。例如,使用`Ext.data.Store`的`load`方法: ```javascript var myStore = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type:...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    ExtJS 是一个强大的JavaScript库,主要用于构建富客户端的Web应用程序,尤其在数据可视化和用户界面组件方面表现出色。Tree和Grid是两个核心组件,广泛应用于数据管理和展示。本篇文章将深入探讨ExtJS中的Tree和Grid...

    Extjs4 GridPanel 的几种样式使用介绍

    通过`dataIndex`属性,我们可以将列头与数据模型的字段关联起来,实现数据的动态展示。此外,`sortable: true`设置使得用户可以通过点击列头对数据进行排序。 ```javascript var datas = [['1', 'gao', 'man'], ['2...

    ext导出grid

    - `cfg.renderer`: 列的渲染器,用于格式化数据显示。 5. **生成表头与数据**: - `flag`变量用于控制表头信息只在第一次循环时添加。 - 使用`substring`方法去除多余的字符。 6. **提交表单**: 最后,通过动态...

    EXT tree 使用 实例 最新

    4. **渲染器(Renderer)**:通过定义`renderer`函数,我们可以自定义节点的显示方式,如添加图标、改变颜色等。 5. **事件监听**:EXT Tree支持多种事件,如`itemclick`(点击节点时触发)、`beforeexpand`(节点...

    extjs中grid中嵌入动态combobox的应用

    2. 定义Grid的数据存储:创建一个用于Grid的store,定义其数据源URL、数据字段以及如何解析从服务器返回的JSON数据。 3. 创建Grid的列模型:在此步骤中,为Grid定义列,并在特定列中设置editor属性为之前定义的...

    asp.net Ext grid 显示列表

    3. **数据交互**:前后端通过JSON格式进行数据交互,后端提供数据服务,前端则负责渲染和展示这些数据。 #### 三、具体实现步骤 ##### 1. 前端页面结构搭建 首先,在ASP.NET项目中创建一个新的页面,命名为`...

Global site tag (gtag.js) - Google Analytics