当前位置: 代码迷 >> JavaScript >> ExtJs4 Grid报表宽度自适应
  详细解决方案

ExtJs4 Grid报表宽度自适应

热度:270   发布时间:2012-11-23 00:03:43.0
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'
});

});
  相关解决方案