我试图用.json文件填充网格，网格无法填充，任何人都可以帮助我，我对这项技术很陌生
这是我的 grid.js
Ext.onReady(function(){
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [ 'id', 'productname', 'desc', 'price' ]
});
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
pageSize: 3,
autoLoad: true,
autoSyncync:true,
proxy: {
type: 'ajax',
url : 'C:\Users\Desktop\08-Feb-2017\data.json',
reader: {type: 'json', root: 'blah'}
}
});
var grid = new Ext.grid.GridPanel({
store: productStore,
renderTo: Ext.getBody(),
plugins: ['rowediting','gridfilters'],
width: 600,
title: 'Products',
columns: [
{
text: 'Id',
dataIndex: 'id',
hidden: true
},
{
text: 'Name',
width:150,
dataIndex: 'productname',
filter:'string',
editor: {
allowBlank: false,
type: 'string'
}
},
{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1
},
{ text: 'Price',
width: 100,
dataIndex: 'price'
},
{
text: 'Type',
width: 100,
dataIndex: 'type',
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Bath','Bath'],
['Kitchen','Kitchen'],
['Electronic','Electronic'],
['Food', 'Food'],
['Computer', 'Computer']
]
})
} ]
//your normal grid config goes here
});
// Ext.create('Ext.grid.Panel', {
// store: productStore,
// });
});
我的 data.json
{
"data": [{
"id": "P1",
"productname": "Ice Pop Maker",
"desc": "Create fun and healthy treats anytime",
"price": "$16.33"
}, {
"id": "P2",
"productname": "Stainless Steel Food Jar",
"desc": "Thermos double wall vacuum insulated food jar",
"price": "$14.87"
}, {
"id": "P3",
"productname": "Shower Caddy",
"desc": "Non-slip grip keeps your caddy in place",
"price": "$17.99"
}, {
"id": "P4",
"productname": "VoIP Phone Adapter",
"desc": "Works with Up to Four VoIP Services Across One Phone Port",
"price": "$47.50"
}, {
"id": "P5",
"productname": "Shower Caddy new",
"desc": "Non-slip grip keeps your caddy in place",
"price": "$17.09"
}, {
"id": "P4",
"productname": "VoIP Phone Adapter New ",
"desc": "Works with Up to Four Five VoIP Services Across One Phone Port",
"price": "$5.50"
}]
}
和我的 Index.html
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<style type="text/css">
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript" src="C:\Users\1255951\Desktop\08-Feb-2017\grid.js"></script>
</head>
<body>
</body>
</html>
对于练习，我将所有.js放在单个文件中。请不要介意。 Added screenshot of the output
答案 0 :(得分：1)
请先试试这个：
Ext.onReady(function(){
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [ 'id', 'productname', 'desc', 'price','type']
});
var pagingStore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory',
enablePaging: true
},
pageSize: 3
});
var productStore = Ext.create('Ext.data.Store', {
model:'Product',
autoLoad: true,
data: [{
"id": "P1",
"productname": "Ice Pop Maker",
"desc": "Create fun and healthy treats anytime",
"price": "$16.33"
}, {
"id": "P2",
"productname": "Stainless Steel Food Jar",
"desc": "Thermos double wall vacuum insulated food jar",
"price": "$14.87"
}, {
"id": "P3",
"productname": "Shower Caddy",
"desc": "Non-slip grip keeps your caddy in place",
"price": "$17.99"
}, {
"id": "P4",
"productname": "VoIP Phone Adapter",
"desc": "Works with Up to Four VoIP Services Across One Phone Port",
"price": "$47.50"
}, {
"id": "P5",
"productname": "Shower Caddy new",
"desc": "Non-slip grip keeps your caddy in place",
"price": "$17.09"
}, {
"id": "P4",
"productname": "VoIP Phone Adapter New ",
"desc": "Works with Up to Four Five VoIP Services Across One Phone Port",
"price": "$5.50"
}]
});
productStore.load(function () {
pagingStore.getProxy().setData(productStore.getRange());
pagingStore.reload();
});
var page = {
xtype: 'pagingtoolbar',
displayInfo: true,
store: pagingStore,
id: 'page',
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: 'No records to display'
};
var grid = new Ext.grid.GridPanel({
store: pagingStore,
renderTo: Ext.getBody(),
plugins: ['rowediting','gridfilters'],
width: 600,
title: 'Products',
columns: [
{
text: 'Id',
dataIndex: 'id',
hidden: true
},
{
text: 'Name',
width:150,
dataIndex: 'productname',
filter:'string',
editor: {
allowBlank: false,
type: 'string'
}
},
{
text: 'Description',
dataIndex: 'desc',
sortable: false,
flex: 1
},
{ text: 'Price',
width: 100,
dataIndex: 'price'
}]
});
var panel = Ext.create('Ext.panel.Panel',{
width:500,
items:[grid,page],
renderTo:Ext.getBody()
})
});
之后，将您的商店更改为遥控器：
var productStore = Ext.create('Ext.data.Store', {
model: 'Product',
pageSize: 3,
autoLoad: true,
proxy: {
type: 'ajax',
url : 'path/to/json',
reader: {type: 'json',
rootProperty: 'data'}
}
});
对于index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/theme-classic.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/extjs/6.2.0/classic/theme-classic/resources/theme-classic-all.css">
<script type="text/javascript" src="path/to/your/js">
<title>Extjs</title>
</head>
<body>
</body>
</html>
希望这有帮助