Question

我想用Ext JS接口创建一个简单的Django应用程序。任务：用户使用表单将数据输入数据库并查看数据库升级。已经完成如下解决问题。写的Django应用程序。

views.py：

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',
})

模板：

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

<form action="check/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="ADD" />
</form>

</body>
</html>

forms.py：

class ProductForm(forms.Form):
    product_name = forms.CharField(max_length=100)
    product_price = forms.IntegerField()

models.py：

class Products(models.Model):
    name = models.CharField(max_length=30)
    price = models.IntegerField()

这很有效。

现在我想使用Ext JS中的 Ext.grid.Panel 组件来渲染表。问题：如何将数据从Django传输到Ext JS？

更新

我写了一个简单的网格，但事实证明这个表是空的。我做错了什么？

    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()
        });


    });

我还使用Django Rest Framework for REST技术更新了Django项目：

class ProductsList(generics.ListCreateAPIView):
    queryset = Products.objects.all()
    serializer_class = ProductsSerializer

class ProductDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Products.objects.all()
    serializer_class = ProductsSerializer

Answer 1

使用ajax。

就像这样：

$('#likes').click(function () {
    var catid;
    catid = $(this).attr("data-catid");
    $.get('/rango/like_category/', {category_id: catid}, function (data) {
        $('#like_count').html(data);
        $('#likes').hide();
    });
});

Answer 2

我看到两种方式： 1）进行特殊的服务器操作，即返回基于JSON的视图。在主模板上创建带有远程存储的Ext.grid.Grid，它将从服务器操作请求数据，返回JSON。它主要是可用的案例。看这里的例子： http://docs.sencha.com/extjs/6.2.0/modern/Ext.grid.Grid.html - 网格 http://docs.sencha.com/extjs/6.2.0/modern/Ext.data.Store.html - 存储

2）使用数据创建html表，并将其转换为ExtJS网格，如下所示：http://examples.sencha.com/extjs/6.2.0/examples/classic/grid/binding.html

如何将数据从Django传输到Ext JS

2 个答案: