//下面红色部分设置属性值,看注释
var _store = Ext.create('Ext.data.Store', {
fields : ['name', 'name2','name3'],
proxy : {
type : 'ajax',
url : 'test!request.action',
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
'load' : function(t, records, successful, eOpts) {
if (successful && records.length == 1
&& records[0].raw.state == -1) { 根据后台返回异常状态,如果load加载错误,返回错误信息。
t.removeAll();
Ext.Msg.alert('异常', records[0].raw.exMsg);
}
}
}
});
Ext.create('Ext.grid.Panel', {
columnLines : true,
store : _store,
border : false,
bodyBorder : false,
lazyLoad : true,
columns : [new Ext.grid.RowNumberer(), {
header : '列1',
dataIndex : 'name',
sortable : false,
flex : 4.5 //占比9/20
}, {
header : '列2',
dataIndex : 'name2',
sortable : false,
flex : 4.5 //占比9/20
}, {
text : '列三',
dataIndex : 'name3',
sortable : false,
flex : 1, //占比1/10
renderer : function(v, m, r) {
return '列3(占1/10)';
}
}];,
loadMask : true,
forceFit : true, //按照比例分配宽度属性。总数为10
});
相关推荐
这篇博客"EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化"探讨了如何使GridPanel的列宽根据数据内容自动调整,以确保最佳的用户界面体验。 在EXTJS中,ColumnModel允许我们定义每列的标题、数据字段、宽度...
在使用ExtJS开发Web应用程序时,经常会遇到在GridPanel中数据列过多,导致横向滚动条自动出现的问题。这个问题主要是由于GridPanel的宽度不足以容纳所有的列宽,因此浏览器会自动显示横向滚动条以便用户查看全部数据...
ProgressColumn是Ext.ux.grid的一个扩展,它允许你在ExtJs的GridPanel中添加一列专门用于显示进度条。这对于监控任务进度、数据加载状态或者任何需要实时反馈的情况非常有用。下面,我们将详细介绍如何使用...
- 列模型定义了表格的列结构,包括列名、宽度、对齐方式等。 - 数据通常通过Store加载到表格中。 - **加强版的列模型** - 可以自定义列的渲染方式、增加操作列等。 - 通过配置`renderer`函数可以实现复杂的数据...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
在配置选项中,定义了列(columns)的配置信息,指定了每列的标题(header)、宽度(width)、数据字段(dataIndex)以及列的渲染器(renderer)。通过这种方式,我们可以控制列的显示内容和样式。如果某列需要根据...