Question

我试图用.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

Answer 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>

希望这有帮助

我试图用json文件加载商店但是没有加载

1 个答案: