stackoverflow团队成员我遇到了将json子阵列数据显示到我的gridpanel我的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中显示名字。但是，当我使用下面的代码更改firstname列时，它会正确显示firstname 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);
}
},
请建议我为什么我的gridpanel没有直接显示用户的名字。我的代码有什么问题。以及在添加渲染器功能时显示数据的原因。
答案 0 :(得分：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 test echo ajax service收到的数据：
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(),
});
如果没有其他问题，这应该有效。
您可以在此处查看工作示例http://jsfiddle.net/Fgh7z/1/