Ext的Grid列中插入进度条（Progress Bar Inside A Grid Cell）

最新推荐文章于 2024-01-07 12:31:07 发布

转载最新推荐文章于 2024-01-07 12:31:07 发布 · 1.1k 阅读

本文展示了一个使用ExtJS框架创建的网格面板示例，该面板包含一个数据表格及进度条，通过Ext.data.Store存储了《辛普森一家》角色的相关信息，并在界面上展示了这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        width: 500,
        height: 200,
        store: Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone', 'progress'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224", 'progress': 25 },
                { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234", 'progress': 50 },
                { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244", 'progress': 75 },
                { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254", 'progress': 100 }
            ]
        }),
        columns: [
            { header: 'Name', dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' },
            {
                header: 'Progress',
                dataIndex: 'progress',
                width: 110,
                renderer: function (v, m, r) {
                    var id = Ext.id();
                    Ext.defer(function () {
                        Ext.widget('progressbar', {
                            renderTo: id,
                            value: v / 100,
                            width: 100
                        });
                    }, 50);
                    return Ext.String.format('<div id="{0}"></div>', id);
                }
            }
        ],
        renderTo: 'output'
    });
});