`
daoshud1
  • 浏览: 555239 次
  • 性别: 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资料extjs资料extjs资料

    它提供了丰富的组件库,包括数据绑定,强大的布局管理,以及高度可定制的用户界面元素。这个压缩包包含了一系列关于ExtJS的学习资源,可以帮助开发者深入理解和掌握这一技术。 1. **Ext 中文文档.chm**:这可能是一...

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

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

    ExtJS 7.6 SDK trial

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

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

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

    extjs图标大全extjs图标大全extjs图标大全extjs图标大全

    ExtJS图标大全是一个集合了多种图标的资源库,特别适合用于Web开发,尤其是使用ExtJS框架构建用户界面时。ExtJS是一款强大的JavaScript UI框架,它提供了丰富的组件和工具,帮助开发者构建功能丰富的、响应式的Web...

    EXTJS应用EXTJS应用EXTJS应用EXTJS应用

    EXTJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。EXTJS的应用主要体现在其强大的组件模型、丰富的用户界面以及高效的数据显示上。EXTJS提供了大量的预定义组件,如表格、面板、菜单、...

    extjs6.2 SDK下载

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

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

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

    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例子Extjs例子

    Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子

    extjs 3.4 开发前准备

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

    EXTJS

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

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...

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

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

Global site tag (gtag.js) - Google Analytics