嵌入页面中的对齐与Ext.ux.touch.Grid示例中显示的不同

Question

The picture comparing the two views I am getting

View代码如下。我试图获取点击披露的视图数据。不知何故，我没有将显示器作为网格，但一个数据就在一行中。任何建议都会有所帮助。

Ext.Loader.setConfig({
enabled : true,
paths   : {
    'Ext.ux.touch.grid' : 'js/Ext.ux.touch.grid'
}
});

Ext.require([

'Ext.ux.touch.grid.List',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
]);

Ext.define('alarms.view.MyAlarmsDetails', {
extend: 'Ext.ux.touch.grid.List',   
xtype : 'myalarmsdetail',   
 config: {
    fullscreen : true,
    store   : 'TestStore',
    features   : [
            {
                ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                launchFn : 'initialize'
            }
        ],
        columns   : [
            {
                header    : 'Company',
                dataIndex : 'company',
                style     : 'padding-left: 1em;',
                width     : '40%',
                filter    : { type : 'string' }
            },
            {
                header    : 'Price',
                dataIndex : 'price',
                style     : 'text-align: center;',
                width     : '15%',
                filter    : { type : 'numeric' }
            },
            {
                header    : 'Change',
                dataIndex : 'change',
                cls       : 'centered-cell redgreen-cell',
                width     : '15%',
                renderer  : function (value) {
                    var cls = (value > 0) ? 'green' : 'red';

                    return '<span class="' + cls + '">' + value + '</span>';
                }
            },
            {
                header    : '% Change',
                dataIndex : 'pct',
                cls       : 'centered-cell redgreen-cell',
                width     : '15%',
                renderer  : function (value) {
                    var cls = (value > 0) ? 'green' : 'red';

                    return '<span class="' + cls + '">' + value + '</span>';
                }
            },
            {
                header    : 'Last Updated',
                dataIndex : 'updated',
                hidden    : true,
                style     : 'text-align: right; padding-right: 1em;',
                sortable  : false,
                width     : '15%'
            }
        ]
}

});

Answer 1

通过在index.html中添加与网格对应的css来解决问题