EXT JS如何获取数据

Question

我是第一次学习EXT Js和示例http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-grid我试图找出如何填充表并找不到表内容的来源。 以前任何使用过EXT Js的人都应该发现寻找数据源的重要性，或者推荐如何以及如何在像jsfiddle这样的平台上测试extjs。

Answer 1

您可以通过许多过程获取网格数据。

第一种方式是将数据绑定到代码本身。

但在此之前，如何绑定数据以及它如何在网格中工作，您需要创建data store，然后将此存储绑定到您的网格store。

下面是一个例子代码：

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields:[ 'name', 'email', 'phone'], 
    data: [ 
     { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 
     { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 
     { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' }, 
     { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 
    ] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { text: 'Name', dataIndex: 'name' }, 
     { text: 'Email', dataIndex: 'email', flex: 1 }, 
     { text: 'Phone', dataIndex: 'phone' } 
    ], 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

这里是煎茶捣鼓你。 Sencha Fiddle

您可以从JSON或XML获取数据的第二种方式。在这种情况下，您还必须创建一个data store（可能是json store或Array store），然后再绑定到网格。只有数据部分会改变。在这里你需要通过使用一些Ajax调用从json中获取数据。

以下是示例代码。

var store = new Ext.data.JsonStore({ 
     // store configs 
     storeId: 'myStore', 

     proxy: { 
      type: 'ajax', 
      url: 'get-images.php', 
      reader: { 
       type: 'json', 
       rootProperty: 'images' 
      } 
     }, 

    //alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example) 
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}] 
}); 

然后调用你的绑定你的商店，就像我们在前面的代码中做的那样。 我会建议你请通过此链接

有用的链接

Grid PAnel _网格面板 Data Store - 数据存储 JSON STore