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

extjs render

EXT 
阅读更多
Extjs的renderer关健字可以通过一个方法改变当前绑定的数据显示内容

//新闻状态方法
function getStatusText(value)
        {
            var result = '禁用';
            switch(value){
                case 0:
                    result = '禁用';
                    break;
                case 1:
                    result = '启用';
                    break;
            }
            return result;
        }

//返回新闻内容链接地址(value:当前字段值,p:不知道是啥,record表示当前记录,不需要定义)
function getNewsContent(value,p,record)
{
    return String.format(
'<a href=# onclick=alert({0})>'+ GetLeft(value,10,"..") +' (查看)</a>',record.data.ID)
}
var grid = new Ext.grid.GridPanel({
id: 'gridPaging',
renderTo: 'divPaging',
.......
columns:[
selModel,
new Ext.grid.RowNumberer(),     //  自动行号,
                    {
                        header: "新闻ID",
                        dataIndex: 'NewsID',
                        width: 50,
                        hidden: false,
                        sortable: true
                    },{
                        header: '新闻标题',
                        dataIndex: 'Name',
                        width: 100,
                        hidden: false,
                        sortable: true
                    },{
                        header: '新闻状态',
                        dataIndex: 'Status',
                        renderer: getStatusText,   //调用一个方法getStatusText, 通过当前vlaue来改变值
                        width: 50,
                        sortable: true
                    },{
                        header: '新闻内容,
                        dataIndex: 'Status',
                        renderer: getNewsContent,   //调用一个方法getNewsContent,返回一个超级链接                      width: 50,
                        sortable: true
                    }



分享到:
评论

相关推荐

    extjs render 用法介绍

    ExtJS是基于JavaScript的一个用于开发富互联网应用的框架,其中Grid组件是它的核心组件之一。Grid组件用于以表格形式展示数据,具有强大的数据管理功能,比如排序、分页、过滤等。Renderer在ExtJS Grid中扮演着重要...

    轻松搞定Extjs 带目录

    - 组件渲染方法:`render`方法用于将组件渲染到页面上。 #### 9. 常用组件 Extjs提供丰富的组件库,包括: - 按钮、日期选择器、ComboBox等,每种组件都有其特定的使用场景和配置方式。 #### 10. 数据管理 Extjs...

    ExtJs4 line chart render by ajax

    在本文中,我们将深入探讨如何在ExtJS4中利用Ajax数据源来绘制线形图表(Line chart)。ExtJS是一个强大的JavaScript库,专为构建富客户端应用程序而设计,它提供了丰富的图表组件,使得数据可视化变得简单易行。让...

    EXTJS修改颜色实例源码

    - `x` 和 `y` 定义了面板在页面中的初始位置,`collapsible` 设为真表示面板可以折叠,`floating` 为真使面板成为浮动窗口,`renderTo` 指定了渲染面板的目标元素,这里为 `document.body`。 - `labelWidth` 和 `...

    ExtJs官方网站中文的入门指南 javascript

    renderTo: 'grid' }); ``` #### 六、Ajax支持 ExtJs内置了对Ajax的支持,可以方便地与服务器端进行数据交互。 ##### **6.1 PHP示例** - **发送请求**: ```javascript Ext.Ajax.request({ url: 'example.php',...

    extjs3合并表头 rowspan

    4. **Custom View**: 如果`GroupingView`不能满足需求,你可以创建一个自定义的视图类,继承自`Ext.grid.GridView`,然后重写`renderUI`和`onRender`方法,以便控制单元格的合并逻辑。 5. **Renderer Function**: ...

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    当你设置 `renderTo` 时,ExtJS会将组件作为子元素添加到指定的DOM节点。例如,在提供的代码示例中: ```javascript var button = new Ext.Button({ renderTo: 'button', text: 'OK' }); ``` 这里,一个新的按钮...

    ExtJS4 Grid改变单元格背景颜色及Column render学习

    利用的是Column的render 先看效果图: 代码如下: 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; &lt;...

    extjs3中引入地图

    renderTo: Ext.getBody() }); ``` 这里我们创建了一个面板,并在其中嵌入了一个ID为"baiduMap"的div,这个div将会被百度地图API占据。 接下来,我们需要在页面加载完成后调用百度地图API,初始化地图。这通常在...

    Extjs Combotree

    7. **初始化和渲染**:最后,调用`render`方法使Combotree组件在页面上显示。 在实际应用中,ExtJS Combobox Tree常用于选择层级结构的组织机构、地区、分类等场景,通过其强大的功能和灵活的配置,可以大大提高...

    轻松搞定Extjs

    - **组件渲染方法render**: 详细解释了render方法的作用及其在组件渲染过程中的重要性。 #### 按钮与日期选择器 这两类组件在用户界面中非常常见,掌握它们的使用方法能够极大地丰富界面功能。 - **开始组件学习...

    Extjs4 拾色器 颜色选择 ColorPicker

    renderTo: Ext.getBody(), // 将颜色选择器渲染到body元素 width: 250, // 设置宽度 height: 200, // 设置高度 listeners: { select: function(picker, color) { console.log('Selected color:', color); // ...

    ExtJS效果Tabs形式

    ExtJS是一种强大的JavaScript框架,主要用于构建富客户端的Web应用程序。在描述中提到的"ExtJS效果Tabs形式"指的是使用ExtJS实现的标签页(Tabs)布局。这种布局方式在Web应用中非常常见,用于组织和展示多个相关的...

    Extjs4.2 Chart柱状图

    renderTo: Ext.getBody(), // 渲染到页面body width: 600, height: 400, xtype: 'chart', store: store, axes: [{ type: 'numeric', position: 'left', fields: ['value'], title: 'Value' }, { type: '...

    extjs 简单表格

    renderTo: Ext.getBody() }); }); ``` 这段代码首先引入了ExtJS库的CSS和JavaScript文件,然后在`Ext.onReady`函数中初始化表格。`data.html`文件可能是数据源,但在这里没有直接使用,因为数据已经内联...

    extjs实践大量实例讲解

    ### ExtJS 实践大量实例讲解 #### 概述 ExtJS 是一款用于构建现代 Web 应用的强大框架,它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高...

Global site tag (gtag.js) - Google Analytics