`

Extjs4 gridPanel 列按照百分比分配宽度

    博客分类:
  • Ext
 
阅读更多

//下面红色部分设置属性值,看注释

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

});

0
0
分享到:
评论

相关推荐

    EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化

    这篇博客"EXTJS_GridPanel_ColumnModel_列的宽度随数据变化而变化"探讨了如何使GridPanel的列宽根据数据内容自动调整,以确保最佳的用户界面体验。 在EXTJS中,ColumnModel允许我们定义每列的标题、数据字段、宽度...

    ExtJS的GridPanel导出excel文件

    ExtJS的GridPanel导出excel文件,方便快捷易懂!

    给Extjs的GridPanel增加“合计”行

    在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...

    Extjs4 GridPanel 的几种样式使用介绍

    在本文中,我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件,它允许用户以表格形式查看、操作和管理大量信息。 首先,我们来看一个简单的GridPanel示例。在...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    Extjs2.02 Gridpanel

    尽管EXTJS GridPanel功能强大,但也有其局限性,比如在EXTJS 2.02版本中可能不支持列锁定和默认的统计功能,也不直接支持数据导出为Excel或PDF格式。然而,随着EXTJS版本的迭代,这些问题在后续版本中得到了改进。 ...

    EXTJS.GRIDPANEL 日期格式

    在深入探讨ExtJS.GridPanel中的日期格式设置之前,我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架,用于构建交互式的Web应用程序,它提供了丰富的UI组件和...

    Extjs让Gridpanel组件自动滚屏

    后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...

    汇总Extjs中GridPanel的各个属性与方法.doc.pdf

    4. **width**: 列的宽度。 5. **align**: 列内数据的对齐方式(左、中、右)。 6. **hidden**: 是否隐藏列。 7. **fixed**: 列是否固定宽度。 8. **menuDisabled**: 是否禁用列的上下文菜单。 9. **resizable**...

    汇总Extjs中GridPanel的各个属性与方法.doc.docx

    列模型定义了每一列的属性,如宽度、标题、对齐方式等。通过 ColumnModel,可以设置列的可编辑性、默认排序和隐藏/显示状态。 3. **getSelectionModel()**: `getSelectionModel()` 返回 GridPanel 的选择模型...

    ExtJS介绍以及GridPanel

    4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还...

    ExtJs GridPanel延时加载.rar

    在给定的"ExtJs GridPanel延时加载.rar"文件中,主要涉及的核心概念是ExtJs中的GridPanel组件以及延时加载技术。GridPanel是ExtJs中一个非常重要的组件,它用于展示表格数据,而延时加载则是一种优化大量数据处理的...

    ExtJS 表格面板GridPanel完整例子

    ExtJS表格面板(GridPanel)是Sencha Ext JS框架中的一个核心组件,它用于展示大量结构化数据。在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们...

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

    4. **事件处理**:GridPanel 提供了多种事件,如 cellClick、rowDblClick 等,可以绑定事件处理器函数以响应用户交互。 5. **排序和分页**:通过设置 GridPanel 的 sortableColumns 和 pagingToolbar 属性,可以...

    Extjs入门教程(treePanel和GridPanel)

    2. 创建GridPanel:定义Grid的数据模型,设置列配置,添加行操作和列筛选。 3. 数据绑定:通过store将TreePanel和GridPanel连接起来,使得选择树节点可以动态改变Grid的数据。 4. 事件监听:添加事件监听器来响应...

    Extjs中的GridPanel

    通过配置列定义(columns),我们可以指定列的标题、宽度、对齐方式等属性。 2. **数据绑定**: GridPanel 通常与 Store 关联,Store 是一个内存中的数据集合,可以从中加载和保存数据。通过 Store,GridPanel ...

    Extjs4 GridPanel的主要配置参数详细介绍

    Extjs4中的GridPanel是一个用来展示数据列表的强大组件,其功能之丰富在Web前端开发领域广受好评。为了更好地理解和使用Extjs4 GridPanel,下面将详细介绍其主要配置参数。 首先,GridPanel的store配置项是表格的...

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    在ExtJS 4中实现两个GridPanel间的数据拖拽功能涉及到了ExtJS框架提供的丰富的组件和插件支持。拖拽功能让用户可以通过交互式地拖动界面元素来执行操作,如移动或复制数据项等。这里的主要知识点是使用ExtJS提供的...

    ExtJs设置GridPanel表格文本垂直居中示例

    在ExtJs中,`GridPanel` 是一个非常重要的组件,用于展示数据表格。在实际的业务场景中,我们经常需要对表格内的文本进行格式化,例如使其垂直居中。本篇将详细介绍如何在ExtJs中设置`GridPanel`表格文本垂直居中。 ...

Global site tag (gtag.js) - Google Analytics