Question

我正在学习书'掌握Ext Js'，我遇到Grid Panel上的问题没有从商店加载数据，我有调试Json格式服务器顺利，我不知道是什么问题，因为在控制台没有错误。

这是我的模型类

Ext.define("pg.model.security.User", {
extend: 'Ext.data.Model',
idProperty: 'userName',
fields: [
    {
        name: 'userName'
    }, {
        name: 'roleId'
    }, {
        name: 'fullName'
    }, {
        name: 'emailId'
    }, {
        name: 'mobileNumber'
    }, {
        name: 'landLineNumber'
    }, {
        name: 'picture'
    }
]
});

这是商店类

Ext.define('pg.store.security.Users', {
extend: 'Ext.data.Store',
requires: [
    'pg.model.security.User' // #1
],
storeId:'userStore',    
model: 'pg.model.security.User', // #2
proxy: {
    type: 'ajax',
    url: 'http://localhost:8080/parkgarau-ws/ws/park/userlist',
    reader: {
        type: 'json',
        root: 'data'
    }
}
});

从url，我将成功检索JSON格式

{ “代码”：200， “消息”： “成功”， “数据”： “[{\” 用户名\ “：\” 管理员\ “\ ”角色ID \“：\” SYS_ADMIN \ “，”fullName \“：\”Bibek Shakya \“，”emailId \“：\”bibek@drose.com.np \“，\”mobileNumber \“：\”9843598726 \“，\”landLineNumber \“ ：\“014323565 \”，\“picture \”：\“index.jpg \”}]“}

这是我的视图类扩展Grid Panel

Ext.define('pg.view.security.UsersList', {
extend: 'Ext.grid.Panel',
alias: 'widget.userslist',
frame: true,
store: Ext.create('pg.store.security.Users'), // #1
columns: [
    {
        width: 150,
        dataIndex: 'userName',
        text: 'Username'
    },
    {
        width: 200,
        dataIndex: 'fullName',
        flex: 1,
        text: 'Name'
    }, {
        width: 250,
        dataIndex: 'emailId',
        text: 'Email'
    }
]
 });

这是我的控制器类

Ext.define('pg.controller.security.Users', {
extend: 'Ext.app.Controller',
views: [
    'security.Users' // #1
],
init: function (application) {
    this.control({
        "userslist": {// #2
            render: this.onRender
        }
    });
},
onRender: function (component, options) { // #3
    this.getStore('userStore').load();
}
});

Answer 1

我弄清楚问题是什么，问题出在json格式上，如果格式包含＆＃39; /＆＃39;它不会成功

[{"userName":"admin","roleId":"SYS_ADMIN","fullName":"Bibek Shakya","emailId":"bibek@drose.com.np","mobileNumber":"9843598726","landLineNumber":"014323565","picture":"index.jpg"}]

但是使用清晰的json格式它运作良好

const imageLocation = `my url for .json file`;  
if (this.platform.is('ios')) {
    targetPath = cordova.file.applicationStorageDirectory + "data.json";
}
else if(this.platform.is('android')) {
    targetPath = cordova.file.dataDirectory + "data.json";
    console.log(cordova.file.dataDirectory + "data.json");
}
fileTransfer.download(imageLocation, targetPath).then((entry) => {
    const alertSuccess = this.alertCtrl.create({
        title: `Download Succeeded!`,
        subTitle: `file was successfully downloaded to: ${entry.toURL()}`,
        buttons: ['Ok']
    });
    alertSuccess.present();
}, (error) => {....

网格面板不会在ext js 6.0.0

1 个答案: