如何在 Extjs 4 中的网格中添加页脚文本

Question

我有一个看起来像这样的网格

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| .95
----------------------
200| Bar, LLC.| .50
----------------------

假设有很多数据并且可以滚动。当我滚动到最后时，我需要在网格体内显示一些文本。

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| .95
----------------------
200| Bar, LLC.| .50
----------------------
<my text goes here>
----------------------

它不应该是停靠的项目。停靠项不是网格可滚动区域的一部分。我如何在 ExtJS 4 中实现这一点？

提前致谢。

Answer 1

您可以操纵网格的 Html 属性为您提供内联元素，然后只需将它们在 dom 中移动到正确的位置以附加到您的行下方。

例如

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        var myGrid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            // Now add the custom HTML
            html: '<div class="myTest">This is a test This is a test This is a test This is a test This is a test  This is a test This is a test This is a test  This is a test This is a test This is a test  This is a test This is a test This is a test  This is a test This is a test This is a test </div>',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            scroll: true,
            renderTo: Ext.getBody()
        });
        // Select and cache the new content element
        var myContent = Ext.get(Ext.dom.Query.selectNode('.myTest'), /*Optional root*/ myGrid.getEl());

        // Now get the HTML and append into the rows container

        var rowsContainer = myGrid.getEl().select('.x-grid-item-container').elements[0];
        myContent.appendTo(rowsContainer);

    }
});

演示：https://fiddle.sencha.com/#fiddle/g8a

如何在 Extjs 4 中的网格中添加页脚文本

How to add a footerText in a grid in Extjs 4

grid

extjs

footer

extjs4