`
yxgyh
  • 浏览: 275567 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Extjs grid宽度自适应

    博客分类:
  • Ext
EXT 
阅读更多
第一种方法必须在页面上设置div的宽度<div id="grid-example" width="90%"></div>
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'}
         ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        //第一种方法:width: Ext.get("grid-example").getWidth(),
        //第二种方法
     bodyStyle:'width:100%', 
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });

 

分享到:
评论
2 楼 myyugioh 2012-09-17  
myyugioh 写道
在3.1版本中,第一方法和第二方法都没效果,表格依然会超出屏幕,虽然只超了一点点
第一种方法无论DIV的宽度设置为百分之几,GridPanel都不会有变化

浏览器为IE8
1 楼 myyugioh 2012-09-17  
在3.1版本中,第一方法和第二方法都没效果,表格依然会超出屏幕,虽然只超了一点点
第一种方法无论DIV的宽度设置为百分之几,GridPanel都不会有变化

相关推荐

    解决extjs grid 不随窗口大小自适应的改变问题

    - 在进行Grid的配置时,应确保相关的尺寸设置不会阻止Grid的自适应行为,如使用`autoWidth:true`和`autoHeight:true`选项来允许Grid根据内容自适应宽度和高度。 - 有时候,直接刷新Grid视图可能会导致一些性能问题,...

    Extjs动态GRID

    EXTJS Grid的列宽度可以设置为自动或固定,也可以根据窗口大小或内容自动调整。使用`flex`属性,可以指定列的相对宽度,使得Grid在不同屏幕尺寸下保持良好的布局。 5. 表头菜单: EXTJS Grid支持自定义表头菜单,...

    extjs 双表头

    flex: 1, // 自适应宽度 dataIndex: 'name' }, { xtype: 'column', // 第二列 text: '联系方式', width: 200, // 固定宽度 items: [{ // 内嵌的子列 text: '邮箱', dataIndex: 'email' }, { text: '电话'...

    Extjs自动最大化panel

    它提供了丰富的组件系统,包括Panel、Grid、Form等,而Panel是EXTJS中的核心组件之一,可以视为一个可自定义的容器,可以包含其他组件。 在传统的EXTJS中,`viewport`是一个特殊的布局,用于将整个页面作为其渲染...

    ExtJs5学生列表前台

    5. **ColumnModel与CellEditing**:ColumnModel定义了Grid中的列,包括列的标题、宽度、数据源等。CellEditing插件允许用户在单元格内直接编辑数据,适用于查看和修改学生信息。 6. **Ajax请求**:在学生详细信息的...

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

    如果GridPanel是自适应高度的(`g.autoHeight`),则调整内部头部(`innerHd`)的宽度与视口宽度相同。 3. **固定列宽和自动扩展**: 对于非自适应高度的情况,调整GridPanel本身以及滚动条的大小。然后,如果启用...

    精通JS脚本之ExtJS框架.part2.rar

    11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局有关的其他知识 11.2.1 父类Ext.Container公共配置与xtype的概念 11.2.2 使用Viewport 11.2.3 实现表单元素横排 第12章 ExtJS对Ajax的支持...

    ExtJs高级技巧

    #### 一、EXTJS_GridPanel_ColumnModel_列的宽度自适应数据长度 在ExtJs开发中,特别是在处理`GridPanel`时,如何使列的宽度根据数据长度动态调整是一个常见的需求。传统的做法是手动设置列宽,但这在数据长度不一...

    ExtJSWeb应用程序开发指南(第2版)

    5.2.2 Fit自适应布局 5.2.3 Accordion折叠布局 5.2.4 Card卡片式布局 5.2.5 Anchor锚点布局 5.2.6 Absolute绝对位置布局 5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0...

    Extjs4佈局詳解

    例如,在开发过程中,当需要一个窗口或者面板内的Grid组件随着窗口大小的变化而自适应调整时,Fit布局就显得非常有用。 #### 2. 特点 - **子元素自动填充**:在Fit布局中,子元素会自动扩展到父容器的宽度和高度,...

    精通JS脚本之ExtJS框架.part1.rar

    11.1.6 自适应布局——FitLayout 11.1.7 ContainerLayout 11.2 与布局有关的其他知识 11.2.1 父类Ext.Container公共配置与xtype的概念 11.2.2 使用Viewport 11.2.3 实现表单元素横排 第12章 ExtJS对Ajax的支持...

    ExtGridDemo

    10. **响应式布局(Responsive Layout)**:在ExtJS 5.1中,你可以利用Ext.container.Viewport和Ext.resizer.Splitter等组件,实现Grid在不同屏幕尺寸下的自适应布局。 11. **主题(Theme)**:ExtJS提供多种视觉...

    ext表格布局小例子

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

    extgrid属性[文].pdf

    在软件开发中,特别是在构建用户界面时,ExtJS是一个常用且强大的JavaScript库,它提供了丰富的组件,例如Ext.grid,用于创建交互式的表格视图。在处理Ext.grid时,理解其属性、方法和事件是至关重要的。以下是对...

    ExtAspNet_v2.3.2_dll

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

Global site tag (gtag.js) - Google Analytics