Ext.data.JsonP.amf({"title":"Loading data from an AMF data source","guide":"

Using AMF Data in Ext JS

\n
\n

Contents

\n
    \n
  1. Working with AMF Packets
    2. \n
  2. Loading records into a Grid
    3. \n
\n
\n\n

Action Message Format (AMF)\nis a compact binary format used by Adobe Flash/Flex to serialize ActionScript\nobject graphs. AMF is typically used to encode messages that are sent between\nan Adobe Flash client and a remote service. AMF is only a serialization\ntechnology, not a transport, so AMF encoded binary data can be used with any\ntransport such as HTTP or HTTPS. This guide will show you how to use Ext JS and\nAJAX to consume AMF data sent over HTTP right inside a web browser, with no need\nfor a Flash plugin. This guide assumes you are already somewhat familiar with\nthe Ext JS Data Package and Grids.

\n\n

Working with AMF Packets

\n\n

AMF-encoded object graphs are typically formatted as an \"AMF Packet\". Multiple\nheaders and messages are batched into a single AMF Packet. Lets take a look at\nhow to use Ext JS to decode an AMF Packet and access its headers and messages.\nFirst lets make an AJAX request to a url that returns binary AMF Packet data.

\n\n
Ext.Ajax.request({\n    url: 'some/url',\n    binary: true,\n    success: function(response) {\n        console.log(response.responseBytes);\n    }\n});\n
\n\n

You should see a byte array in your console - either a Uint8Array if it is\nsupported by your browser or just an Array of numbers. These are the raw\nbytes that compose the AMF Packet. It is important to remember to set the\nbinary config to true on the AJAX request\nso that the response will be interpreted as binary data and the responseBytes\nproperty will be set on the response object.

\n\n

Now that we have the raw binary data we need to decode it so that we can do\nsomething useful with it. To do this we use the Ext.data.amf.Packet\nclass. Inside the success callback function add the following code to construct\na new Packet:

\n\n
var packet = Ext.create('Ext.data.amf.Packet');\n
\n\n

This gives us an empty AMF Packet object to work with. The Packet class contains\nall the logic required to decode the binary AMF-formatted data. To decode the\nAMF byte array, simply pass it to the Packet's\ndecode method:

\n\n
packet.decode(response.responseBytes);\n
\n\n

We now have a fully decoded AMF Packet. The decoded data can be accessed using\nthe following properties on the packet object:

\n\n\n\n\n

Loading records into a Grid

\n\n

Now that we know how to use the AMF Packet, lets learn how to load some\nAMF-encoded records into an Ext JS Store using an\nAMF Proxy and AMF Reader\nand display those records in a Grid. In this example we\nwill load records from an AMF Packet containing a list of pangrams in several\nlanguages. Start by defining the Model:

\n\n
Ext.define('Pangram', {\n    extend: 'Ext.data.Model',\n    fields: [\n        { name: 'language', type: 'string' },\n        { name: 'text', type: 'string' }\n    ]\n});\n
\n\n

Next create a Store to contain the Model instances.\nConfigure the store with an AMF Proxy. The AMF Proxy\nuses an AMF Reader by default so there is no need\nto explicitly configure the reader unless you need to change some of the reader's\ndefault configurations.

\n\n
var store = Ext.create('Ext.data.Store', {\n    model: 'Pangram',\n    proxy: {\n        type: 'amf',\n        url: 'some/url',\n    },\n    autoLoad: true\n});\n
\n\n

Finally create a Grid that is bound to the store we just\ncreated:

\n\n
Ext.create('Ext.grid.Panel', {\n    title: 'AMF0 Pangrams',\n    height: 350,\n    width: 700,\n    store: store,\n    columns: [\n        { text: 'Language', dataIndex: 'language', width: 130 },\n        { text: 'Pangram', dataIndex: 'text', flex: 1 }\n    ],\n    renderTo: Ext.getBody()\n});\n
\n\n

\"AMF

\n\n

The above code makes some assumptions about where the raw record data are located\nwithin the packet. By default AMF Reader expects\nthe Packet's first message body to be an array of objects containing the record\ndata. But this is not always the case - sometimes you need to tell the reader\nwhere to find the records in the message body. This is done using the reader's\nroot configuration property:

\n\n
proxy: {\n    type: 'amf',\n    url: 'some/url',\n    reader: {\n        type: 'amf',\n        root: 'foo.bar'\n    }\n}\n
\n\n

This tells the reader that the message body is an object containing a property\nnamed \"foo\" which is an object containing a property named \"bar\", and the value\nof \"bar\" is an array of raw record data objects.

\n\n

AMF Packets can contain multiple messages. You can configure which message the\nreader should look for the records in using the\nmessageIndex config:

\n\n
reader: {\n    type: 'amf',\n    messageIndex: 42\n}\n
\n\n

For a working example and full source code see AMF Grid Example

\n"});