0

stackoverflow 团队成员我在将 json 子数组数据显示到我的网格面板时遇到问题,我的 json 数据在下面

{
    "total": 11,
    "success": true,
    "employeetaskdetdata": [{
        "subject": "Work in progress",
        "employee": {
            "username": "yogen",
            "designation": {
                "department": {
                    "company": {
                        "cmpname": "Kintu Designs Pvt ltd",
                        "cmptitle": "Kintu Designs Pvt ltd",
                        "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                        "cmpfax": "8128812153",
                        "cmpcontact": "8128812153",
                        "cmpwebsite": "www.kintudesigns.com",
                        "cmpemail1": "yaryan997@gmail.com",
                        "cmpemail2": "yaryan997@gmail.com",
                        "cmpcountry": "India",
                        "cmpstate": "Gujarat",
                        "cmpcity": "Surat",
                        "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                        "cmplogo": "calendar.png",
                        "cmplogopath": "upload/images/",
                        "cmpcreatedby": 1,
                        "cmpcreatedon": 1335764510000,
                        "cmpmodifiedon": 1335764510000,
                        "cmpmodifiedby": 0,
                        "id": 1
                    },
                    "departname": "Programmer",
                    "createdby": 1,
                    "createdon": 1335764655000,
                    "modifiedby": 1,
                    "modifiedon": 1335764655000,
                    "departdescr": "<b>?Programmer</b>",
                    "id": 2
                },
                "createdby": 1,
                "createdon": 1335764825000,
                "modifiedby": 1,
                "modifiedon": 1335764825000,
                "designame": "Senior JAVA Programmer",
                "desigdescr": "<b>?Senior JAVA Programmer</b>",
                "id": 6
            },
            "createdby": 1,
            "createdon": 1335765074000,
            "modifiedby": 1,
            "modifiedon": 1335765074000,
            "dateofbirth": 1335810600000,
            "joindate": 1337106600000,
            "firstname": "Yogendra",
            "surname": "Singh",
            "gender": "M",
            "marital": "U",
            "nationality": "",
            "contactno": "",
            "mobileno": "",
            "email": "",
            "otheremail": "",
            "fathername": "",
            "mothername": "",
            "accountno": "",
            "salary": "",
            "bank": {
                "bankname": "ICICI Bank",
                "bankaddress": "ICICI Bank Nanpura",
                "id": 1
            },
            "address": "",
            "id": 6,
            "password": "123"
        },
        "todaysdate": "2012-05-05",
        "createdby": 6,
        "createdon": 1336203851000,
        "modifiedby": 6,
        "modifiedon": 1336203851000,
        "project": {
            "company": {
                "cmpname": "Kintu Designs Pvt ltd",
                "cmptitle": "Kintu Designs Pvt ltd",
                "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                "cmpfax": "8128812153",
                "cmpcontact": "8128812153",
                "cmpwebsite": "www.kintudesigns.com",
                "cmpemail1": "yaryan997@gmail.com",
                "cmpemail2": "yaryan997@gmail.com",
                "cmpcountry": "India",
                "cmpstate": "Gujarat",
                "cmpcity": "Surat",
                "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                "cmplogo": "calendar.png",
                "cmplogopath": "upload/images/",
                "cmpcreatedby": 1,
                "cmpcreatedon": 1335764510000,
                "cmpmodifiedon": 1335764510000,
                "cmpmodifiedby": 0,
                "id": 1
            },
            "createdby": 1,
            "createdon": 1335765435000,
            "modifiedby": 1,
            "modifiedon": 1335765435000,
            "projectname": "Project I",
            "projecttitle": "Project I",
            "projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
            "projectstart": 1335810600000,
            "projectend": 1336761000000,
            "id": 1
        },
        "task": {
            "duration": 4.0,
            "employee": [{
                "username": "hiren",
                "designation": {
                    "department": {
                        "company": {
                            "cmpname": "Kintu Designs Pvt ltd",
                            "cmptitle": "Kintu Designs Pvt ltd",
                            "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                            "cmpfax": "8128812153",
                            "cmpcontact": "8128812153",
                            "cmpwebsite": "www.kintudesigns.com",
                            "cmpemail1": "yaryan997@gmail.com",
                            "cmpemail2": "yaryan997@gmail.com",
                            "cmpcountry": "India",
                            "cmpstate": "Gujarat",
                            "cmpcity": "Surat",
                            "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                            "cmplogo": "calendar.png",
                            "cmplogopath": "upload/images/",
                            "cmpcreatedby": 1,
                            "cmpcreatedon": 1335764510000,
                            "cmpmodifiedon": 1335764510000,
                            "cmpmodifiedby": 0,
                            "id": 1
                        },
                        "departname": "Programmer",
                        "createdby": 1,
                        "createdon": 1335764655000,
                        "modifiedby": 1,
                        "modifiedon": 1335764655000,
                        "departdescr": "<b>?Programmer</b>",
                        "id": 2
                    },
                    "createdby": 1,
                    "createdon": 1335764755000,
                    "modifiedby": 1,
                    "modifiedon": 1335764755000,
                    "designame": "Senior PHP Programmer",
                    "desigdescr": "<b>?Senior PHP Programmer</b>",
                    "id": 3
                },
                "createdby": 1,
                "createdon": 1335765018000,
                "modifiedby": 1,
                "modifiedon": 1335765018000,
                "dateofbirth": null,
                "joindate": null,
                "firstname": "Hiren",
                "surname": "Patel",
                "gender": "M",
                "marital": "U",
                "nationality": "",
                "contactno": "",
                "mobileno": "",
                "email": "",
                "otheremail": "",
                "fathername": "",
                "mothername": "",
                "accountno": "",
                "salary": "",
                "bank": {
                    "bankname": "ICICI Bank",
                    "bankaddress": "ICICI Bank Nanpura",
                    "id": 1
                },
                "address": "",
                "id": 4,
                "password": "123"
            }, {
                "username": "yogen",
                "designation": {
                    "department": {
                        "company": {
                            "cmpname": "Kintu Designs Pvt ltd",
                            "cmptitle": "Kintu Designs Pvt ltd",
                            "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                            "cmpfax": "8128812153",
                            "cmpcontact": "8128812153",
                            "cmpwebsite": "www.kintudesigns.com",
                            "cmpemail1": "yaryan997@gmail.com",
                            "cmpemail2": "yaryan997@gmail.com",
                            "cmpcountry": "India",
                            "cmpstate": "Gujarat",
                            "cmpcity": "Surat",
                            "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                            "cmplogo": "calendar.png",
                            "cmplogopath": "upload/images/",
                            "cmpcreatedby": 1,
                            "cmpcreatedon": 1335764510000,
                            "cmpmodifiedon": 1335764510000,
                            "cmpmodifiedby": 0,
                            "id": 1
                        },
                        "departname": "Programmer",
                        "createdby": 1,
                        "createdon": 1335764655000,
                        "modifiedby": 1,
                        "modifiedon": 1335764655000,
                        "departdescr": "<b>?Programmer</b>",
                        "id": 2
                    },
                    "createdby": 1,
                    "createdon": 1335764825000,
                    "modifiedby": 1,
                    "modifiedon": 1335764825000,
                    "designame": "Senior JAVA Programmer",
                    "desigdescr": "<b>?Senior JAVA Programmer</b>",
                    "id": 6
                },
                "createdby": 1,
                "createdon": 1335765074000,
                "modifiedby": 1,
                "modifiedon": 1335765074000,
                "dateofbirth": 1335810600000,
                "joindate": 1337106600000,
                "firstname": "Yogendra",
                "surname": "Singh",
                "gender": "M",
                "marital": "U",
                "nationality": "",
                "contactno": "",
                "mobileno": "",
                "email": "",
                "otheremail": "",
                "fathername": "",
                "mothername": "",
                "accountno": "",
                "salary": "",
                "bank": {
                    "bankname": "ICICI Bank",
                    "bankaddress": "ICICI Bank Nanpura",
                    "id": 1
                },
                "address": "",
                "id": 6,
                "password": "123"
            }],
            "createdby": 1,
            "createdon": 1336460152000,
            "modifiedby": 1,
            "modifiedon": 1336460152000,
            "project": {
                "company": {
                    "cmpname": "Kintu Designs Pvt ltd",
                    "cmptitle": "Kintu Designs Pvt ltd",
                    "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                    "cmpfax": "8128812153",
                    "cmpcontact": "8128812153",
                    "cmpwebsite": "www.kintudesigns.com",
                    "cmpemail1": "yaryan997@gmail.com",
                    "cmpemail2": "yaryan997@gmail.com",
                    "cmpcountry": "India",
                    "cmpstate": "Gujarat",
                    "cmpcity": "Surat",
                    "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                    "cmplogo": "calendar.png",
                    "cmplogopath": "upload/images/",
                    "cmpcreatedby": 1,
                    "cmpcreatedon": 1335764510000,
                    "cmpmodifiedon": 1335764510000,
                    "cmpmodifiedby": 0,
                    "id": 1
                },
                "createdby": 1,
                "createdon": 1335765435000,
                "modifiedby": 1,
                "modifiedon": 1335765435000,
                "projectname": "Project I",
                "projecttitle": "Project I",
                "projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
                "projectstart": 1335810600000,
                "projectend": 1336761000000,
                "id": 1
            },
            "percentdone": 55,
            "durationunit": "d",
            "startdate": 1336415400000,
            "parentid": 2,
            "taskindex": 0,
            "taskname": "Sub Task 2 1",
            "enddate": 1336761000000,
            "priority": 2,
            "id": 3,
            "depth": 2
        },
        "percentdone": 20,
        "totalworkedhrs": -9.5,
        "starttime": "09:00:00",
        "finishtime": "00:00:00",
        "id": 1,
        "description": "<b>Work in progress</b>",
        "hours": 0,
        "minutes": 30
    }, {
        "subject": "Work in progresss",
        "employee": {
            "username": "yogen",
            "designation": {
                "department": {
                    "company": {
                        "cmpname": "Kintu Designs Pvt ltd",
                        "cmptitle": "Kintu Designs Pvt ltd",
                        "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                        "cmpfax": "8128812153",
                        "cmpcontact": "8128812153",
                        "cmpwebsite": "www.kintudesigns.com",
                        "cmpemail1": "yaryan997@gmail.com",
                        "cmpemail2": "yaryan997@gmail.com",
                        "cmpcountry": "India",
                        "cmpstate": "Gujarat",
                        "cmpcity": "Surat",
                        "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                        "cmplogo": "calendar.png",
                        "cmplogopath": "upload/images/",
                        "cmpcreatedby": 1,
                        "cmpcreatedon": 1335764510000,
                        "cmpmodifiedon": 1335764510000,
                        "cmpmodifiedby": 0,
                        "id": 1
                    },
                    "departname": "Programmer",
                    "createdby": 1,
                    "createdon": 1335764655000,
                    "modifiedby": 1,
                    "modifiedon": 1335764655000,
                    "departdescr": "<b>?Programmer</b>",
                    "id": 2
                },
                "createdby": 1,
                "createdon": 1335764825000,
                "modifiedby": 1,
                "modifiedon": 1335764825000,
                "designame": "Senior JAVA Programmer",
                "desigdescr": "<b>?Senior JAVA Programmer</b>",
                "id": 6
            },
            "createdby": 1,
            "createdon": 1335765074000,
            "modifiedby": 1,
            "modifiedon": 1335765074000,
            "dateofbirth": 1335810600000,
            "joindate": 1337106600000,
            "firstname": "Yogendra",
            "surname": "Singh",
            "gender": "M",
            "marital": "U",
            "nationality": "",
            "contactno": "",
            "mobileno": "",
            "email": "",
            "otheremail": "",
            "fathername": "",
            "mothername": "",
            "accountno": "",
            "salary": "",
            "bank": {
                "bankname": "ICICI Bank",
                "bankaddress": "ICICI Bank Nanpura",
                "id": 1
            },
            "address": "",
            "id": 6,
            "password": "123"
        },
        "todaysdate": "2012-05-05",
        "createdby": 6,
        "createdon": 1336204557000,
        "modifiedby": 6,
        "modifiedon": 1336204557000,
        "project": {
            "company": {
                "cmpname": "Kintu Designs Pvt ltd",
                "cmptitle": "Kintu Designs Pvt ltd",
                "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                "cmpfax": "8128812153",
                "cmpcontact": "8128812153",
                "cmpwebsite": "www.kintudesigns.com",
                "cmpemail1": "yaryan997@gmail.com",
                "cmpemail2": "yaryan997@gmail.com",
                "cmpcountry": "India",
                "cmpstate": "Gujarat",
                "cmpcity": "Surat",
                "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                "cmplogo": "calendar.png",
                "cmplogopath": "upload/images/",
                "cmpcreatedby": 1,
                "cmpcreatedon": 1335764510000,
                "cmpmodifiedon": 1335764510000,
                "cmpmodifiedby": 0,
                "id": 1
            },
            "createdby": 1,
            "createdon": 1335765435000,
            "modifiedby": 1,
            "modifiedon": 1335765435000,
            "projectname": "Project I",
            "projecttitle": "Project I",
            "projectdesc": "<b>Kintu Design Pvt ltd new Project I</b>",
            "projectstart": 1335810600000,
            "projectend": 1336761000000,
            "id": 1
        },
        "task": {
            "duration": 4.0,
            "employee": [{
                "username": "hiren",
                "designation": {
                    "department": {
                        "company": {
                            "cmpname": "Kintu Designs Pvt ltd",
                            "cmptitle": "Kintu Designs Pvt ltd",
                            "cmpdesc": "<b>D-104 Toral Appartment Surat,<br>Timalyabad.</b>",
                            "cmpfax": "8128812153",
                            "cmpcontact": "8128812153",
                            "cmpwebsite": "www.kintudesigns.com",
                            "cmpemail1": "yaryan997@gmail.com",
                            "cmpemail2": "yaryan997@gmail.com",
                            "cmpcountry": "India",
                            "cmpstate": "Gujarat",
                            "cmpcity": "Surat",
                            "cmpaddress": "D-104 Toral Appartment Surat,\nTimalyabad.",
                            "cmplogo": "calendar.png",
                            "cmplogopath": "upload/images/",
                            "cmpcreatedby": 1,
                            "cmpcreatedon": 1335764510000,
                            "cmpmodifiedon": 1335764510000,
                            "cmpmodifiedby": 0,
                            "id": 1
                        },
                        "departname": "Programmer",
                        "createdby": 1,
                        "createdon": 1335764655000,
                        "modifiedby": 1,
                        "modifiedon": 1335764655000,
                        "departdescr": "<b>?Programmer</b>",
                        "id": 2
                    },
                    "createdby": 1,
                    "createdon": 1335764755000,
                    "modifiedby": 1,
                    "modifiedon": 1335764755000,
                    "designame": "Senior PHP Programmer",
                    "desigdescr": "<b>?Senior PHP Programmer</b>",
                    "id": 3
                },
                "createdby": 1,
                "createdon": 1335765018000,
                "modifiedby": 1,
                "modifiedon": 1335765018000,
                "dateofbirth": null,
                "joindate": null,
                "firstname": "Hiren",
                "surname": "Patel",
                "gender": "M",
                "marital": "U",
                "nationality": "",
                "contactno": "",
                "mobileno": "",
                "email": "",
                "otheremail": "",
                "fathername": "",
                "mothername": "",
                "accountno": "",
                "salary": "",
                "bank": {
                    "bankname": "ICICI Bank",
                    "bankaddress": "ICICI Bank Nanpura",
                    "id": 1
                },
                "address": "",
                "id": 4,
                "password": "123"
            }]
}

我的模型在下面

Ext.define('DEV.model.employeetaskdetModel', {
    extend: 'Ext.data.Model',
    fields : [
              { name: 'id'},
              { name: 'taskname', mapping:'task.taskname'},
              { name: 'firstname', mapping: 'employee.firstname'},
              { name: 'employee',type: 'auto'},
              { name: 'percentdone'}
          ]
});

我的网格面板列在下面

columns: [ {
     xtype: 'gridcolumn',
     dataIndex: 'percentdone',
     text: 'Percent Done'
 }, {
     xtype: 'gridcolumn',
     dataIndex: 'firstname',
     text: 'First Name'
 }]

我无法在我的 gridPanel 中显示名字。但是,当我用下面的代码更改名字列时,它会正确显示名字网格面板。

{
         xtype: 'gridcolumn',
         dataIndex: 'employee',
         text: 'User Name',
         renderer: function (employee) {
             var result = [];
             employee = employee || [];
             var value = employee.firstname;
             if (value) {
                 result.push(value);
             }
             return result;
             console.log(employee.firstname);
         }
     },

请告诉我为什么我的网格面板没有直接显示用户的名字。我的代码有什么问题。以及为什么当我添加渲染器函数时它会显示数据。

4

1 回答 1

2

我遇到了类似的问题并解决了。

映射嵌套的 json 数据不需要映射属性。

模型:

Ext.define("Model", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name.name"},
        {name: "phone", mapping: "name.phone"},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

存储我们将从 jsfiddle 测试 echo ajax 服务收到的数据:

var Store = Ext.create("Ext.data.Store", {
    model: "Model",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        //
        actionMethods: {read: 'POST'}, // echo ajax service required
        extraParams: {
            json: Ext.JSON.encode({
                root: [
                    {id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
                    {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
                    {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
                    {id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},
                ]
                })
        },
        reader: {
            type: 'json',
            root: 'root'
        }
    },
});

网格:

Ext.create("Ext.grid.Panel", {
    store: Store,
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, editor: "textfield"},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    renderTo: Ext.getBody(),
});

如果没有其他问题,这应该可以工作。

Here you can see work example http://jsfiddle.net/Fgh7z/1/

于 2012-10-02T16:39:42.777 回答