`
zhanglei7372
  • 浏览: 21690 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类
最新评论

ExtJs4 Grid表格宽度自适应

阅读更多


var gridForm = Ext.create('Ext.form.Panel', {
id: 'company-form',
frame: true,
title: 'Company data',
bodyPadding: 5,
width: '100%',
layout: 'column',    // Specifies that the items will now be arranged in columns

fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},

items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
//store: ds,
height: 600,
forceFit: true, //列表宽度自适应
title:'客户信息表',
columns: [{
    text: 'id',
    dataIndex: 'id',
    hidden: true
},{
    text: '认筹编号',
    dataIndex: 'company'
},
{
    text   : '姓名',
    dataIndex: 'price'
},
        {
            text   : '电话号码',
            dataIndex: 'change'
        },
        {
            text   : '证件号',
            dataIndex: 'pctChange'
        },
        {
            text   : '签到状态',
            dataIndex: 'lastChange'
        }]
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Company details',
defaults: {
    width: 240,
    labelWidth: 90
},
defaultType: 'textfield',
items: [{
    fieldLabel: 'Name',
    name: 'company'
},{
    fieldLabel: 'Price',
    name: 'price'
},{
    fieldLabel: '% Change',
    name: 'pctChange'
},{
    xtype: 'datefield',
    fieldLabel: 'Last Updated',
    name: 'lastChange'
}, {
    xtype: 'radiogroup',
    fieldLabel: 'Rating',
    columns: 3,
    defaults: {
        name: 'rating' //Each radio has the same name so the browser will make sure only one is checked at once
    },
    items: [{
        inputValue: '0',
        boxLabel: 'A'
    }, {
        inputValue: '1',
        boxLabel: 'B'
    }, {
        inputValue: '2',
        boxLabel: 'C'
    }]
}]
}]
});


/**
* 左部
*
*/
var product_left = Ext.create('Ext.panel.Panel', {
region: 'west',
width: 300,
collapsible: true,
split: true
});

var product_center = Ext.create('Ext.panel.Panel', {
region: 'center',
width: '100%',
items: [gridForm]
});

/**
* EXT渲染
*
*/
Ext.onReady(function () {

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [product_left, product_center],
renderTo: 'proFrame'
});

});
分享到:
评论

相关推荐

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

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

    extjs 双表头

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

    ext表格布局小例子

    - `autoHeight: true` 设置表格高度自适应。 - `store: store` 绑定数据源。 - `viewConfig.forceFit: true` 设置列宽自动调整以填充整个容器宽度。 - `bbar` 配置了底部工具栏,包含了分页控制、操作按钮等功能。 ...

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

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ExtJs5学生列表前台

    1. **ExtJs5组件库**:ExtJs5提供了丰富的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)等。在学生列表页面中,我们可能会用到Grid组件来展示学生列表,而Panel可以用来包裹整个界面,提供布局和样式控制...

    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...

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

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

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

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

    ExtGridDemo

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

    extgrid属性[文].pdf

    9. `autoWidth`:如果设置为true,表格宽度会根据内容自动调整。 10. `bbar/tbar`:分别表示底部和顶部的状态栏。 11. `bufferResize`:在容器重新布局时的缓冲频率,以减少不必要的渲染。 12. `colModel/cm`:定义...

Global site tag (gtag.js) - Google Analytics