0

私はdjangoフレームワークを使用しており、ローカルホストから次のようなjson形式でデータを取得しています。

[{"stu_name": "Aatir"}, {"stu_name": "Mohsin"}, {"stu_name": "Anil"}, {"stu_name": "Anwar"}, {"stu_name": "Amir"}]

このデータを使用して、extjsグリッドに表示したい

私のextjsファイルは次のとおりです。

hmak.html

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="{{MEDIA_URL}}extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}extjs/ext-debug.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}app.js"></script>
</head>
<body>
</body>
</html>

app.js

Ext.Loader.setConfig({ enabled: true });
Ext.application({
    requires : [ 'Ext.container.Viewport'],

    controllers: ['Users'],

    name: 'AM',
    appFolder: 'media/app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist'
                }
            ]
        });
    }
});

Users.js（コントローラー）

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    stores: ['Users'],
    models: ['User'],

    views: ['user.List', 'user.Edit'],

    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }           
        });
    },

    updateUser: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getUsersStore().sync();
    },

    editUser: function(grid, record) {
        var view = Ext.widget('useredit');

        view.down('form').loadRecord(record);
    }
});

List.js（表示）

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    store: 'Users',

    title : 'All Users',

    initComponent: function() {
        this.store = {
            fields: ["stu_name"]
        };

        this.columns = [
            {header: "stu_name",  dataIndex: "stu_name",  flex: 1}
        ];

        this.callParent(arguments);
    }

});

Edit.js（表示）

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',

    title : 'Edit User',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : "stu_name",
                        fieldLabel: "stu_name"
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

Users.js（ストア）

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',

    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'http://127.0.0.1:8000/task/'
        },
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

User.js（モデル）

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',

    fields: ["stu_name"]
});

viewport.js

Ext.define('SI.view.Viewport', {
    extend: 'Ext.container.Viewport'
});

そして私のPythonで私は書いた：

def homePage(request):
    StuInfo.objects.all().values_list()
    return render_to_response('hmak.html', context_instance=RequestContext(request))

これは次にhmak.htmlに移動し、localhost / task（プロキシで定義しました）から取得するデータは、上記のjsonデータで示したようにjson形式になります。

グリッドが表示されない理由は何ですか？ヘッダーが表示されるだけです...

誰かがこの問題で私を助けてくれますか？

4

2 に答える 2

1

私はあなたが変更する必要があると思います

Ext.define('SI.view.Viewport', {
    extend: 'Ext.container.Viewport'
});

に

Ext.define('AM.view.Viewport', {
    extend: 'Ext.container.Viewport'
});

また、関数内のストア呼び出しを削除しinitComponentます。

于 2013-09-30T17:03:23.187 に答える
0

これが問題の原因である可能性があります。

this.store = {
        fields: ["stu_name"]
};

このinitComponent関数では、gridpanelクラス定義で定義したストアを上書きしています。それを削除してみましたか？

于 2012-04-24T21:31:19.087 に答える