Extjs

Question

我尝试了不同的方式来在网格列中显示日期并为网格行实现点击事件。

我的要求是：

1 当我的对象中的日期格式为："dateval": "2014-09-05T16:19:39 +04:00"

时在网格列中显示日期

我的数据：

data: [
    {
        "age": 13,
        "name": "Ben Watson",
        "gender": "male",
        "phone": "+1 (548) 314-8928",
        "registered": "2014-09-05T16:19:39 +04:00"
    }

代码：

function render_date(val) {
    val = Ext.util.Format.date(val, 'Y-m-d');
    return val;
}
columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Age', dataIndex: 'age' },
        {
            text: 'Registered',
            dataIndex: 'registered',
            type: 'date',
            dateFormat: 'timestamp',
            renderer: render_date
        }
]

2 当用户单击面板中的网格行时，在相邻面板中显示该行中的数据。

我正在使用 ext.define 并在此应用程序中进行扩展

Answer 1

我试了一下你的代码，发现日期时间字符串中的 space 没有被 javascript 正确解析。我删除了所有 spaces，对我来说效果很好。

看这个Fiddle（下面的代码以防损坏link）

Ext.application({
    name: 'MyApp',

    launch: function() {
        var store = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'registered'],

            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            },
            autoLoad: true
        });


        function render_date(val) {
            var date = new Date(val.replace(" ", ""));
            val = Ext.util.Format.date(date, 'Y-m-d');
            return val;
        }

        Ext.create("Ext.grid.Panel", {
            title: 'Simpsons',
            renderTo: Ext.getBody(),
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            selModel: new Ext.selection.RowModel({
                mode: "SINGLE"
            }),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }, {
                text: 'Registered',
                dataIndex: 'registered',
                type: 'date',
                dateFormat: 'timestamp',
                renderer: render_date
            }],
            height: 200,
            width: 800,
        });
    }
});


// data1.json
{
    "items": [{
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Bart',
        "email": "bart@simpsons.com",
        "phone": "555-222-1234",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Homer',
        "email": "homer@simpsons.com",
        "phone": "555-222-1244",
        "registered": "2014-09-05T16:19:39 +04:00"
    }, {
        'name': 'Marge',
        "email": "marge@simpsons.com",
        "phone": "555-222-1254",
        "registered": "2014-09-05T16:19:39 +04:00"
    }]
}

Extjs - 在网格列中显示日期和网格行的单击事件

Extjs - displaying date in grid column and click event for grid row

javascript

json