How to transfer data from Django to Ext JS
<p>I'm new to web programming. I would like to create a simple Django application with  Ext JS interface. Task:
The user enters data into a database using forms and sees the database upgrade.It has been done to solve the problem as follows. Written Django application.</p>

<p><strong>views.py</strong></p>

<pre class="lang-python prettyprint-override"><code>def addProduct(request):
if request.method == 'POST':
    form = ProductForm(request.POST)
    if form.is_valid():
        data = form.cleaned_data
        product_name = data['product_name']
        product_price = data['product_price']
        Products.objects.create(name=product_name, price=product_price)
else:
    form = ProductForm()
return render(request, 'addProduct.html', {
    'ProductsList': Products.objects.all(),
    'form': form,
    # 'Title': 'Range of products',
    # 'product_name': 'type product name here',
})
</code></pre>

<p><strong>template</strong></p>

<pre class="lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;{{ Title }}&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
    &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Product&lt;/th&gt;
    &lt;/tr&gt;
    {% for current in ProductsList %}
        &lt;tr&gt;
            &lt;td&gt;{{ current.name }}&lt;/td&gt;
            &lt;td&gt;{{ current.price }}&lt;/td&gt;
        &lt;/tr&gt;
    {% endfor %}
&lt;/table&gt;

&lt;form action="check/" method="post"&gt;
    {% csrf_token %}
    {{ form }}
    &lt;input type="submit" value="ADD" /&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>forms.py</strong></p>

<pre class="lang-python prettyprint-override"><code>class ProductForm(forms.Form):
    product_name = forms.CharField(max_length=100)
    product_price = forms.IntegerField()
</code></pre>

<p><strong>models.py</strong></p>

<pre class="lang-python prettyprint-override"><code>class Products(models.Model):
    name = models.CharField(max_length=30)
    price = models.IntegerField()
</code></pre>

<p>This works well.</p>

<p><a href="http://i.stack.imgur.com/HfzLj.png" rel="nofollow"><img src="http://i.stack.imgur.com/HfzLj.png" alt="Result"></a></p>

<p>Now I would like to use <em>Ext.grid.Panel</em> component from Ext JS to render table. Question: How do I transfer data from Django to Ext JS? </p>

<p><strong><em>UPDATE</em></strong></p>

<p>I wrote a simple grid, but it turns out the table is empty. What am I doing wrong?</p>



<pre><code>    Ext.onReady(function () {
        Ext.define('Products', {
            extend: 'Ext.data.Model',

            fields: [{
                name: 'Name',
                type: 'string'
            }, {
                name: 'Price',
                type: 'int'
            }]
        });

        var store = Ext.create('Ext.data.Store', {
            model: 'Products',
            autoLoad: true,
            proxy: {
                type: 'rest',
                url: 'http://127.0.0.1:8000/products/',
                reader: {
                    type: 'json'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Products',
            height: 200,
            width: 400,
            store: store,
            columns: [{
                header: 'Name',
                dataIndex: 'Name'
            }, {
                header: 'Price',
                dataIndex: 'Price'
            }],
            renderTo: Ext.getBody()
        });


    });
</code></pre>

<p>I also updated the Django project using Django Rest Framework for REST technology:</p>



<pre><code>class ProductsList(generics.ListCreateAPIView):
    queryset = Products.objects.all()
    serializer_class = ProductsSerializer

class ProductDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Products.objects.all()
    serializer_class = ProductsSerializer
</code></pre>

<p>I see two ways: 
1) Make special server action, that will be return JSON-based view. On main template create Ext.grid.Grid with remote store, that will request data from server action, that returns JSON. It's mostly usable case. Look here example: 
<a href="http://docs.sencha.com/extjs/6.2.0/modern/Ext.grid.Grid.html" rel="nofollow">http://docs.sencha.com/extjs/6.2.0/modern/Ext.grid.Grid.html</a> - grid
<a href="http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html" rel="nofollow">http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html</a> - store</p>

<p>2) Make html table with data, and transform it to ExtJS grid like here: <a href="http://examples.sencha.com/extjs/6.2.0/examples/classic/grid/binding.html" rel="nofollow">http://examples.sencha.com/extjs/6.2.0/examples/classic/grid/binding.html</a></p>

python django extjs