`

extjs—renderer

 
阅读更多
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 实现多行合并(rowspan)效果

    - `demo.html`:这是一个示例HTML文件,其中包含了ExtJS GridPanel的配置和初始化代码,可能包含了上述提到的renderer函数、store配置和ColumnModel设置。 - `rowspan.js`:这是JavaScript文件,包含了实现多行合并...

    EXTJS单元格变色、行变色

    在EXTJS中,单元格变色可以通过renderer函数来实现。renderer函数是Grid Panel中 columns配置项的一个属性,用于格式化单元格的内容。在上面的代码中,我们可以看到,renderer函数fnColumnColor被应用于“人员名称”...

    ExtJs表格点击超链接获取行的值

    ### ExtJs表格点击...在ExtJs中,通过合理利用`renderer`和选择模型,我们可以轻松地在表格中添加超链接,并在点击时获取行数据。同时,丰富的配置选项使得我们能够高度定制表格的功能和样式,满足不同的业务需求。

    EXTjs4.0以下合并表格

    4. **Renderer Function**: 渲染器函数是EXTjs中一个重要的概念,它允许我们根据数据动态地生成单元格的内容和样式。在合并表格的场景中,我们可以在渲染器中添加逻辑判断,根据数据决定是否合并单元格。 5. **...

    extjs3合并表头 rowspan

    5. **Renderer Function**: 渲染器函数可以用来控制单元格的内容和样式。在合并表头的情况下,你可以编写一个渲染器函数,根据需要返回HTML代码,包含`rowspan`属性。 6. **Cell Spanning Logic**: 合并表头需要...

    Extjs表格合并代码

    3. 利用ExtJS的`renderer`函数,根据数据动态调整单元格的样式。 4. 使用条件判断语句,针对不同的浏览器使用不同的CSS修复。 总结,实现ExtJS表格合并代码的关键在于理解表格组件的结构、配置和模板机制,并能妥善...

    extjs grid

    例如,`dataIndex`属性用于关联字段,`header`定义列头文本,`renderer`函数可以自定义单元格的显示样式。 3. **行编辑**:EXTJS Grid支持行内编辑,用户可以直接在表格中修改数据,提供了一种直观的数据输入方式。...

    extjs模拟excel表格

    我们可以使用renderer函数来自定义单元格的显示,例如格式化数字、日期或应用样式。 3. **可编辑性**:通过使用CellEditing或RowEditing插件,我们可以实现单元格级别的编辑功能。用户点击单元格时,会弹出一个...

    EXTJS Grid总结例子

    例如,可以使用`renderer`函数改变单元格显示,使用`listeners`添加事件处理,或者创建自定义插件以实现特定功能。 七、网格操作 EXTJS Grid提供了丰富的交互功能,如行选择、行编辑、行删除等。Selection Model...

    Extjs4.2 Chart柱状图

    renderer: Ext.util.Format.numberRenderer('0,0') } }] }; ``` 最后,使用`Ext.create`创建并显示图表: ```javascript Ext.create(chartCfg); ``` 以上代码创建了一个基本的柱状图。通过调整配置对象中的...

    Extjs+Gride使用方法

    5. **Renderer**: 用于自定义列的显示,可以格式化数据,如日期、货币等。 现在,让我们一步步学习如何使用ExtJS和Gride: **创建Store** ```javascript var store = Ext.create('Ext.data.Store', { fields: ['...

    Extjs Grid 扩展实例

    例如,我们可以通过设置`dataIndex`指定数据源字段,使用`renderer`函数来自定义单元格的显示,甚至为特定列添加自定义的点击事件。 2. **行编辑**:为了实现增删改查的功能,我们可以集成ExtJS的行编辑插件(`Ext....

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

    extjs实现报表

    - **自定义渲染器(Renderer)**:为列值设置自定义格式或逻辑,增强数据展示效果。 4. **排序与过滤** - **列排序**:允许用户通过点击列头进行升序或降序排序。 - **行过滤**:添加过滤器以隐藏不满足条件的行...

    Extjs学习—总结的extjs的一些常用小知识点

    ### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...

    extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

    这可能涉及到使用Store和Model来加载和管理数据,然后在视图层使用模板(Template)或渲染函数(Renderer)将数据转化为可交互的菜单项。 5. **快捷方式**:快捷方式通常是对某个功能或应用的快速访问入口。在ExtJS...

    extjs3多表头

    - `renderer`:自定义列的渲染函数,用于改变数据显示格式。 3. **GridPanel配置** - `colModel`:设置为包含多表头的ColumnModel实例。 - `viewConfig`:配置表格视图,可以影响多表头的样式和行为。 4. **...

    extjs grid示例代码

    - **自定义列渲染**:使用`renderer`函数对数据显示进行格式化。 - **工具栏**:可以添加自定义工具栏来增加功能,如搜索框、按钮等。 4. **示例代码详解** 在压缩包的“示例代码”中,可能包含了以上提到的各种...

    Extjs Grid 中的 ToolTip效果

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。在实际应用中,为了提供更好的用户体验,我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息,这就是ToolTip的效果。EXTJS ...

    ExtJS 使用grid显示数据

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

Global site tag (gtag.js) - Google Analytics