如何使用MYSQL和PHP中的网格数据绑定网格以形成mvc extjs 4

嗨，我刚刚学习ExtJS几个月，我想创建一个类似的GUI。单击项目时，将填充表单。有什么建议吗

更新

这是我的代码，
但当项目单击网格时，网格没有绑定到表单，怎么了

控制器：Detail.js

Ext.define('UserApp.controller.Detail', {
    extend: 'Ext.app.Controller',
   stores: ['User'],
    models: ['User'],
    views: ['user.Detail','user.listDetail'],
    refs: [{
        ref: 'Detail',
        selector: 'form'
    }],
    init: function() {
        this.control({
            'listDetail': {
                selectionchange: this.gridSelectionChange,
                viewready: this.onViewReady
            }
        });
    },
    gridSelectionChange: function(model, records) {
        if (records[0]) {
             console.log('clicked item');
             this.getDetail().getForm().loadRecord(records[0]);
        }
    },
   onViewReady: function(grid) {
        grid.getSelectionModel().select(0);
    }    
});

Ext.define('UserApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'userID',
    fields: [
            {name: 'userID',   type: 'int'},
            {name: 'name'},
            {name: 'lastname'},
            {name: 'age',   type: 'int'},

            ]
});

模型：User.js

Ext.define('UserApp.controller.Detail', {
    extend: 'Ext.app.Controller',
   stores: ['User'],
    models: ['User'],
    views: ['user.Detail','user.listDetail'],
    refs: [{
        ref: 'Detail',
        selector: 'form'
    }],
    init: function() {
        this.control({
            'listDetail': {
                selectionchange: this.gridSelectionChange,
                viewready: this.onViewReady
            }
        });
    },
    gridSelectionChange: function(model, records) {
        if (records[0]) {
             console.log('clicked item');
             this.getDetail().getForm().loadRecord(records[0]);
        }
    },
   onViewReady: function(grid) {
        grid.getSelectionModel().select(0);
    }    
});

Ext.define('UserApp.model.User', {
    extend: 'Ext.data.Model',
    idProperty: 'userID',
    fields: [
            {name: 'userID',   type: 'int'},
            {name: 'name'},
            {name: 'lastname'},
            {name: 'age',   type: 'int'},

            ]
});

View:Detail.js//form显示数据项单击网格

Ext.define('UserApp.view.user.Detail' ,{
    extend: 'Ext.form.FieldSet',
    alias : 'widget.Detail',

    margin: '0 0 0 10',

    title:'Company details',

    defaults: {
        width: 240,
        labelWidth: 90
    },

    defaultType: 'textfield',

    items: [{
        fieldLabel: 'userID',
        name: 'userID'
    },{
        fieldLabel: 'Nama',
        name: 'name'
    },{
        fieldLabel: 'lastname',
        name: 'lastname'
    },{
        fieldLabel: 'age',
        name: 'age'
    }]
    });    

查看：listdail.js//Show grid data

Ext.define('UserApp.view.user.listDetail' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.listDetail',
   // id:'userID2',
    store: 'User',
    title : 'Users',
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'User',   
        dock: 'bottom',
        displayInfo: true
    }],
    initComponent: function() {

        this.columns = [
            {
            header: 'ID',
            dataIndex: 'userID',
            flex: 1
            },
            {
            header: 'Name',  
            dataIndex: 'name',  
            flex: 1
            },
           // {header: 'Last Name',  dataIndex: 'lastname',  flex: 1},
           // {header: 'Age', dataIndex: 'age', flex: 1}
        ];

        this.callParent(arguments);
    }
});

---

这是直接从Sencha文档中获取的。您的第一站是浏览这个示例并逐行研究：

然后，您可以查看呈现问题中包含的图像的确切代码：

---

这个问题似乎离题了，因为OP对编程一无所知。德布林：请看我的代码。。网格没有绑定到源，怎么了？？感谢