EXT JSデータを取得する方法

Question

私はEXT Jsの初めての学習者です。例ではhttp://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#array-gridです。テーブルがどのように埋め込まれているのかを調べようとしており、テーブルの内容のソースを見つけることができません。 以前にEXT Jsを使っていた人は、データのソースを見つけるのは簡単ではありません。また、jsfiddleのようなプラットフォームでextjをテストすることも可能ですか？

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からデータを取得できる2番目の方法です。この場合も、data store（jsonストアまたはArrayストアの可能性があります）を作成し、グリッドに再度バインドする必要があります。データ部分のみが変更されます。ここでは、いくつかの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