如何綁定網格以形成mvc extjs 4使用來自MYSQL和PHP的網格數據

-1

嗨，我剛剛學習了幾個月的分機js，我想創建一個像http://loianegroner.com/wp-content/uploads/2012/05/extjs4-mvc-grid-binded-form-loiane.jpg的GUI。當一個項目被點擊將填寫表格。任何建議如何使它？如何綁定網格以形成mvc extjs 4使用來自MYSQL和PHP的網格數據

更新

這是我的代碼，
但電網沒有綁定，形成項目時，點擊網格，什麼是錯的？

控制器：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); 
    }  
});

型號：user.js的

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

      ] 
});

查看：Detail.js //形式顯示數據項點擊電網

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' 
    }] 
    });

查看：listDetail.js //顯示網格數據

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

來源

2014-07-15 Atien Albantani

這個問題似乎是無關緊要的，因爲OP不知道編程。 – lpapp