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

我有一个类似这样的网格

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
200| Bar, LLC.| $23.50
----------------------

让我们假设有很多数据和它的滚动。当我滚动到最后时，我需要在网格体中显示一些文本

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
200| Bar, LLC.| $23.50
----------------------
<my text goes here>
----------------------

----------------------
Id |客户|总计
----------------------
100 |富公司| 19.95美元
----------------------
200 | Bar，LLC.| 23.50美元
----------------------
----------------------

它不应该是dockedItem。停靠的项目不属于网格的可滚动区域。如何在ExtJS4中实现这一点

---

提前感谢。

您可以操作网格的

Html

属性，为您提供内联元素，然后将它们在dom中移动到正确的位置，以便在行下方追加

例如

Ext.application({
名字：“小提琴”，
启动：函数（）{
Ext.create（'Ext.data.Store'{
storeId:“辛普森商店”，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：{
“项目”：[{
'姓名'：'丽莎'，
“电子邮件”：lisa@simpsons.com",
“电话”：“555-111-1224”
}, {
'姓名'：'巴特'，
“电子邮件”：bart@simpsons.com",
“电话”：“555-222-1234”
}, {
“名称”：“荷马”，
“电子邮件”：homer@simpsons.com",
“电话”：“555-222-1244”
}, {
“name”：“Marge”，
“电子邮件”：marge@simpsons.com",
“电话”：“555-222-1254”
}]
},
代理：{
键入：“内存”，
读者：{
键入：“json”，
rootProperty:“项”
}
}
});
var myGrid=Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
//现在添加自定义HTML
这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试这是个测试，
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[{
文本：“名称”，
数据索引：“名称”
}, {
文本：“电子邮件”，
数据索引：“电子邮件”，
弹性：1
}, {
短信：“电话”，
数据索引：“电话”
}],
身高：200，
宽度：400，
卷轴：没错，
renderTo:Ext.getBody（）
});
//选择并缓存新的内容元素
var myContent=Ext.get（Ext.dom.Query.selectNode（'.myTest'），/*可选根*/myGrid.getEl（））；
//现在获取HTML并将其附加到rows容器中
var rowsContainer=myGrid.getEl（）.select（'.x-grid-item-container'）。元素[0]；
myContent.appendTo（rowsContainer）；
}
});

---

演示：

这是你想在结尾展示的摘要吗？@Saki这更像是一个免责声明。因此无法使用现有的网格摘要功能。谢谢Rob。这就是我要找的。但我无法在ExtJS4中实现这一点。有什么想法吗，罗布？我觉得rowsContainer还没有定义。我在网格的afterrender事件中执行此操作。此外，当我单击列标题时，文本会移动到行的上方。我已经修改了ExtJS 4的示例，但是如果行的长度超过网格高度，则样式设置会出现问题。我会让你去解决的。您还需要对每个

sortchange

事件重新执行一些工作。看看那些指导你工作得非常好的文档。除了文本出现在数据之前。当gridContent被添加到rowsContainer时，其中没有其他元素。在用数据呈现网格后，是否要执行此操作？使用存储区中的上述代码。on（'load'）完成了此操作。谢谢你，罗布。

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);

    }
});