`
daoshud1
  • 浏览: 558146 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Extjs gridt自适应高度

    博客分类:
  • Ext
阅读更多
希望Ext的表格能自适应外层的div大小,但Ext的Grid构造函数的width、height项不支持100%的设置方式,所以改用以下方式初始化:
建立DIV
<div id="content"> 
    <div id="grid-example"></div> 
<div>
建立CSS
#content { 
width: 100%; 
height: 100%; 
} 
var grid = new Ext.grid.GridPanel({ 
        store: store, 
        columns: [ 
            {id:'id',header: "序号", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'}, 
            {header: "数据表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'}, 
            {header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'}, 
            {header: "类型", width: 75, sortable: true, dataIndex: 'type'} 
        ], 
        stripeRows: true, 
        width: Ext.get("content").getWidth(), 
        height: Ext.get("content").getHeight(), 
addClass:"grid", 
tbar: [{ 
            text: '新增模版', 
            handler : function(){ 
window.location.href = 'templateDefineList4.html'; 
            } 
            },{ 
            text: '删除模版', 
            handler : function(){ 

            } 
        }], 
        bbar: new Ext.PagingToolbar({ 
            pageSize: 15, 
            store: store, 
            displayInfo: true, 
            displayMsg: '当前显示记录 {0} - {1} 总条数 {2}', 
            emptyMsg: '无记录' 
        }) 
    });

原文地址:http://seraph115.iteye.com/blog/225157
分享到:
评论

相关推荐

    extjs4 treepanel动态改变行高度示例

    代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: ‘技能分配’, flex: 1, width:150, dataIndex: ‘skillDistribut’, sortable: true, renderer:function(value, metaData, record, ...

    extjs 入门实例之布局

    NULL 博文链接:https://1151461406.iteye.com/blog/2361439

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    ExtJS 7.6 SDK trial

    2. **响应式布局**:ExtJS 7.6继续强化其响应式设计能力,允许开发者为不同的屏幕尺寸和设备创建自适应的应用。这包括新的布局管理器和组件调整,使得在桌面、平板和手机上都能提供一致的界面。 3. **Modern ...

    ExtJs4.2 下拉框树

    3. **自动调整高度**:解决高度不能自动调整的问题,开发者可能引入了自适应高度的逻辑,可能是通过计算节点数量、每行的高度以及视口高度,然后动态设置下拉框的高度。 4. **自定义样式和交互**:为了使下拉树更加...

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    这些组件具有高度可配置性和可复用性,可以快速构建复杂的用户界面。 2. **数据绑定**:ExtJS支持双向数据绑定,使得视图和模型之间的数据同步变得简单。数据源可以是JSON、XML或其他数据格式,与服务器端的数据...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    extjs6.2 SDK下载

    5. **布局管理**:EXTJS拥有强大的布局系统,6.2版本可能会进一步完善,提供更多的布局选项和更好的自适应布局,以适应不同屏幕尺寸。 6. **数据绑定**:EXTJS的数据绑定机制允许组件与数据源实时同步,6.2可能会...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和...通过深入理解EXTJS的组件模型、布局管理、数据绑定和远程通信,开发者可以创建出具有高度交互性和响应性的用户界面。

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,...通过深入学习和应用EXTJS 4.2,开发者可以构建出具有高度交互性和用户体验的现代Web应用程序。

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    extjs 3.4 开发前准备

    EXTJS的强大在于其丰富的组件库和高度可定制化,学习EXTJS不仅需要理解其API,还需要实践和调试以提升对框架的理解。随着对EXTJS的深入学习,开发者可以构建复杂、功能完善的Web应用程序。后续章节将分享更多关于...

    EXTJS

    2. **响应式设计**:EXTJS 支持多种屏幕尺寸和设备,可以自适应地调整布局,为移动设备提供良好的用户体验。 3. **强大的数据管理**:EXTJS 提供了Model、Store 和 Proxy 机制,用于处理数据的加载、存储和同步。 4....

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    Extjs自动最大化panel

    2. **尺寸配置**:`autoWidth`和`autoHeight`属性分别可以让Panel宽度和高度自适应,当这些属性设置为`true`时,Panel会根据其父容器的尺寸自动调整大小。 3. **事件监听**:可能需要监听窗口或容器的resize事件,...

    合同管理系统 extjs开发的 让大家一起学习

    3. **响应式布局**:EXTJS支持响应式布局,可以自适应不同设备和屏幕尺寸,保证在移动端和桌面端都有良好的用户体验。 4. **强大的图表组件**:EXTJS内置了多种图表类型,可用于展示合同数据的统计分析,帮助企业...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

Global site tag (gtag.js) - Google Analytics