Question

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

我的要求是：

1当我的对象中的日期为格式时，在网格列中显示日期：＆＃34; dateval＆＃34;：＆＃34; 2014-09-05T16：19：39 +04：00＆＃34;

我的数据：

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

我玩了你的代码并发现javascript正确解析了日期时间字符串中的空格。我删除了所有空格，它对我来说很好。

请参阅此Fiddle（如果链接断开，请参阅下面的代码）

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 - 在网格列中显示日期并在网格行中单击事件

1 个答案: