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是基于JavaScript的一个用于开发富互联网应用的框架,其中Grid组件是它的核心组件之一。Grid组件用于以表格形式展示数据,具有强大的数据管理功能,比如排序、分页、过滤等。Renderer在ExtJS Grid中扮演着重要...
- 组件渲染方法:`render`方法用于将组件渲染到页面上。 #### 9. 常用组件 Extjs提供丰富的组件库,包括: - 按钮、日期选择器、ComboBox等,每种组件都有其特定的使用场景和配置方式。 #### 10. 数据管理 Extjs...
在本文中,我们将深入探讨如何在ExtJS4中利用Ajax数据源来绘制线形图表(Line chart)。ExtJS是一个强大的JavaScript库,专为构建富客户端应用程序而设计,它提供了丰富的图表组件,使得数据可视化变得简单易行。让...
- `x` 和 `y` 定义了面板在页面中的初始位置,`collapsible` 设为真表示面板可以折叠,`floating` 为真使面板成为浮动窗口,`renderTo` 指定了渲染面板的目标元素,这里为 `document.body`。 - `labelWidth` 和 `...
renderTo: 'grid' }); ``` #### 六、Ajax支持 ExtJs内置了对Ajax的支持,可以方便地与服务器端进行数据交互。 ##### **6.1 PHP示例** - **发送请求**: ```javascript Ext.Ajax.request({ url: 'example.php',...
4. **Custom View**: 如果`GroupingView`不能满足需求,你可以创建一个自定义的视图类,继承自`Ext.grid.GridView`,然后重写`renderUI`和`onRender`方法,以便控制单元格的合并逻辑。 5. **Renderer Function**: ...
当你设置 `renderTo` 时,ExtJS会将组件作为子元素添加到指定的DOM节点。例如,在提供的代码示例中: ```javascript var button = new Ext.Button({ renderTo: 'button', text: 'OK' }); ``` 这里,一个新的按钮...
利用的是Column的render 先看效果图: 代码如下: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <...
renderTo: Ext.getBody() }); ``` 这里我们创建了一个面板,并在其中嵌入了一个ID为"baiduMap"的div,这个div将会被百度地图API占据。 接下来,我们需要在页面加载完成后调用百度地图API,初始化地图。这通常在...
7. **初始化和渲染**:最后,调用`render`方法使Combotree组件在页面上显示。 在实际应用中,ExtJS Combobox Tree常用于选择层级结构的组织机构、地区、分类等场景,通过其强大的功能和灵活的配置,可以大大提高...
- **组件渲染方法render**: 详细解释了render方法的作用及其在组件渲染过程中的重要性。 #### 按钮与日期选择器 这两类组件在用户界面中非常常见,掌握它们的使用方法能够极大地丰富界面功能。 - **开始组件学习...
renderTo: Ext.getBody(), // 将颜色选择器渲染到body元素 width: 250, // 设置宽度 height: 200, // 设置高度 listeners: { select: function(picker, color) { console.log('Selected color:', color); // ...
ExtJS是一种强大的JavaScript框架,主要用于构建富客户端的Web应用程序。在描述中提到的"ExtJS效果Tabs形式"指的是使用ExtJS实现的标签页(Tabs)布局。这种布局方式在Web应用中非常常见,用于组织和展示多个相关的...
renderTo: Ext.getBody(), // 渲染到页面body width: 600, height: 400, xtype: 'chart', store: store, axes: [{ type: 'numeric', position: 'left', fields: ['value'], title: 'Value' }, { type: '...
renderTo: Ext.getBody() }); }); ``` 这段代码首先引入了ExtJS库的CSS和JavaScript文件,然后在`Ext.onReady`函数中初始化表格。`data.html`文件可能是数据源,但在这里没有直接使用,因为数据已经内联...
### ExtJS 实践大量实例讲解 #### 概述 ExtJS 是一款用于构建现代 Web 应用的强大框架,它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高...