grid - नेस्टेड JSON सरणी के साथ ExtJS में रीडर रूट




(2)

मैं ग्रिड को डेटा के भाग के साथ भरने की कोशिश कर रहा हूं जो मैं JSON से ले रहा हूं। उदाहरण के लिए (छोटा संस्करण), JSON इस तरह दिखता है:

 {
  "data": [
    {
      "name": "machine1",
      "devices": {
        "disk": [
          {
            "type": "file",
            "device": "disk",
          },
          {
            "type": "block",
            "device": "cdrom",
          }
        ],
      },
    },
    {
      "name": "machine2",
      "devices": {
        "disk": [
          {
            "type": "file",
            "device": "disk",
          },
          {
            "type": "block",
            "device": "cdrom",
          }
        ],
    },
  ]
}

data[0].devices.disk डिस्क के बारे में जानकारी पाने के लिए मुझे data[0].devices.disk प्राप्त करने की आवश्यकता है। data[0].devices.disk , इसलिए मैंने store.proxy.reader.root बदलने के बारे में सोचा। store.proxy.reader.root संपत्ति की तरह root = 'data[0].devices.disk' या root = 'data.0.devices.disk' लेकिन दोनों काम नहीं किया। मुझे पता है कि सबसे आसान तरीका है JSON प्रतिक्रिया बदलना है, लेकिन मुझे दिलचस्पी है अगर मैं JSON को बदलने के बिना ग्रिड को भरने में सक्षम हूं।


Answers

'डेटा [0] .devices.disk' का प्रयोग मेरे लिए किया था आपका उदाहरण JSON थोड़ी गड़बड़ हुआ था, हालांकि कुछ अनुगामी अल्पविरामों के साथ।

jsFiddle

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['type', 'device']
});

Ext.onReady(function() {
    var myData = '{"data":[{"name":"machine1","devices":{"disk":[{"type":"file","device":"disk"},{"type":"block","device":"cdrom"}]}},{"name":"machine2","devices":{"disk":[{"type":"file","device":"disk"},{"type":"block","device":"cdrom"}]}}]}';

    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        data: Ext.decode(myData),
        proxy: {
            type:'memory',
            reader: {
                type:'json',
                root: 'data[0].devices.disk'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        collapsible: true,
        multiSelect: true,
        stateId: 'stateGrid',
        columns: [
            {
                text     : 'type',
                dataIndex: 'type'
            },
            {
                text     : 'device',
                dataIndex: 'device'
            }
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        renderTo: 'grid',
        viewConfig: {
            stripeRows: true,
            enableTextSelection: true
        }
    });
});

ऐसा करने का सबसे अच्छा तरीका यह है कि ईवेंट को बाद में afterrender और फिर कॉलबैक फ़ंक्शन में डिफ़ॉल्ट मान सेट करें।

यह कोड देखें:

new Ext.form.field.ComboBox({
    //This is our default value in the combobox config
    defaultValue: 0,
    listeners: {
        //This event will fire when combobox rendered completely
        afterrender: function() {
           //So now we are going to set the combobox value here.
           //I just simply used my default value in the combobox definition but it's possible to query from combobox store also.
           //For example: store.getAt('0').get('id'); according to Brik's answer.
           this.setValue(this.defaultValue);    
        }
    }
});