`
韩悠悠
  • 浏览: 841851 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ext中forceFit:true配置

EXT 
阅读更多

Grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前一直会显示"Loading…"

 

要自己去计算每列的宽度,如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit 后,Grid会根据你在cm里设置的width按比例分配,非常智能。

 

var grid=new Ext.grid.GridPanel({   
                renderTo:"grid",   
                stripeRows:true,//斑马线效果   
                loadMask:true,   
                store: ds,   
                height:600,   
                cm:cm,   
                viewConfig:{   
                    forceFit:true   
                }                   
            });    
var
grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
}); 

 

分享到:
评论

相关推荐

    ext表格布局小例子

    - `viewConfig.forceFit: true` 设置列宽自动调整以填充整个容器宽度。 - `bbar` 配置了底部工具栏,包含了分页控制、操作按钮等功能。 #### 五、数据操作 - **删除数据**:点击“ɾ”按钮时,根据选中的行数据进行...

    Ext-实现带查询以及分页的列表

    viewConfig: { forceFit: true }, columns: [ {header: " ", dataIndex: 'typeImage', width: 20}, {header: "资源标题", width: 190, sortable: true, dataIndex: 'title'}, {header: "类别", width: 80, ...

    Ext.grid.GridPanel属性祥解

    `Ext.grid.Column`代表了表格中的一列,可以通过以下配置项来定义其行为和外观: 1. **id** - 说明:定义了列的唯一标识符。 2. **header** - 说明:定义了列标题的文字内容。 3. **dataIndex** - 说明:将列...

    ext增删改查

    ### 关于Ext.js中的增删改查操作 在前端开发领域,Ext JS 是一个非常流行的JavaScript框架,它为创建复杂的Web应用程序提供了丰富的组件库。本文将深入探讨如何使用Ext JS来实现基本的数据增删改查(CRUD)操作,...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    forceFit: true // 自动调整列宽 }, bbar: new Ext.PagingToolbar({ store: store, // 关联数据存储 displayInfo: true, // 显示当前页和总页数 pageSize: 25 // 每页记录数 }) }); ``` 在这个例子中,我们...

    关于EXT分页,分组,排序

    forceFit: true, enableGroupingMenu: true }, ... }); ``` ### 三、EXTJS 排序 排序是数据展示中非常重要的功能之一,EXTJS 提供了灵活的排序机制。 #### 实现步骤: 1. **定义可排序的列**: 在 `...

    ext grid 根据条件指定行颜色

    为了根据条件改变`Ext.grid`中行的颜色,我们可以利用`grid`的`viewConfig`配置项中的`getRowClass`函数来实现。这个函数接收四个参数:`record`(当前行的数据记录)、`rowIndex`(当前行的索引)、`rowParams`(行...

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

    业务场景,需要实现最终效果图如下: GridPanel代码如下配置...true, store : ‘test_store’, viewConfig : { forceFit : true, scrollOffset : 0 }, anchor : ‘100%’, selModel : new Ext.grid.CheckboxSelectionM

    Extjs2.0动态加载gird的例子

    forceFit: true // 自适应列宽 }, bbar: new Ext.PagingToolbar({ store: store, displayInfo: true, pageSize: 25 }) }); ``` 在上面的代码中,我们设置了Store的URL指向数据接口,并且指定了分页参数。...

    extjs3多表头

    多表头的实现基于Ext.grid.ColumnModel,它定义了表格列的配置和行为。在ExtJS 3中,你可以通过嵌套ColumnModel来创建多层表头。下面将详细介绍如何使用ExtJS 3创建多表头,以及相关的配置项和方法。 1. **创建多...

    extgrid属性[文].pdf

    25. `viewConfig`:自定义视图配置,如`forceFit`,用于使所有列自适应宽度。 26. `sortable`:实现列的排序功能。 27. `sortInfo`:用于解决中文排序问题,需要自定义`applySort`函数。 在处理数据排序时,可以...

    Extjs中文教程2.x

    - **示例**: `viewConfig: { forceFit: true }`。 **18.5 分页** - **实现**: 通过 `Ext.PagingToolbar` 组件实现分页功能。 #### 十九、GridPanel 扩展 **19.1 扩展** - **概念**: 通过扩展现有组件来增加新的...

    Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码

    最后,确保`GridPanel`的视图配置`viewConfig`适合整个容器,例如通过设置`forceFit: true`来使列自适应宽度。 总结起来,`Ext.data.PagingMemoryProxy`是一个高效的方法,用于在前端一次性加载所有数据并进行分页...

    asp.net Ext grid 显示列表

    forceFit: true } }); // 渲染grid grid.render('gridDiv'); } // 页面加载完成时调用ready函数 window.onload = ready; ``` 在上面的代码中,我们首先定义了一个包含多个列的`ColumnModel`,每...

    extjs中grid中嵌入动态combobox的应用

    `ds`和`cm`分别指定了数据源和列模型,`clicksToEdit: 1`表示单击即可编辑,`viewConfig: { forceFit: true }`使得列宽自动适应。 6. **renderer函数**: 这个函数用于在Grid中显示ComboBox的选择值。当ComboBox的值...

    extjs grid设置某列背景颜色和字体颜色的实现方法

    forceFit: true, getRowClass: function(record, rowIndex, rowParams, store) { // 如果数据项的'zt'字段值为0,返回'x-grid-record-red'类,否则返回空字符串 if (record.data.zt == 0) { return 'x-grid-...

    ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

    - `viewConfig`:配置视图选项,如`autoFill`和`forceFit`,用于调整列宽以适应网格宽度。 最后,`GridPanel`与`Store`关联,使得数据自动加载到网格中。还可以添加事件监听器,例如在数据加载完成后触发的回调函数...

    ExtJS下grid的一些属性说明

    - `forceFit`: 是否根据网格宽度自动调整列宽以避免横向滚动条出现。 - `enableGroupingMenu`: 控制列头下拉菜单中是否包含分组选项。 - `showGroupName`: 分组依据的列头是否显示分组名称。 - `...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    GridPanel是一个可配置的组件,用于展示表格数据。它由多列(columns)组成,每列有自己的宽度,总宽度可能超过GridPanel的可视区域。当总宽度大于GridPanel的宽度时,横向滚动条就会出现。 解决这个问题的关键在于...

Global site tag (gtag.js) - Google Analytics