Création dynamique d'une grille EXTJS

Question

Je me demandais s'il était possible de créer dynamiquement une vue de grille. Je ferai de mon mieux pour expliquer ...

J'ai actuellement une table de base de données qui a différentes régions, j'ai créé une grille autour de cela et vous pouvez ajouter de nouvelles entrées dans cette grille, qui à son tour l'ajoute à la table ..

J'ai également une table de base de données pour les personnes de contact qui contiennent les noms, les numéros de téléphone, et utilise toutes les régions comme une liste déroulante. Encore une fois, vous pouvez ajouter de nouvelles entrées dans ce tableau via la grille.

Enfin, j'ai une troisième grille qui montre toutes les personnes de contact, ventilées selon leurs régions. Le problème que je rencontre est de savoir comment le rendre dynamique? Actuellement, j'ai dur codé les titres de la région et remplir une grille qui filtre correctement, mais que faire si quelqu'un ajoute une nouvelle région complètement? Comment puis-je créer un titre et une grille avec le filtre approprié pour la région nouvellement ajoutée?

Troisième code de réseau:

Ext.define('myproject.example', { 
    extend: 'Ext.form.Panel', 
    alias: 'widget.********', 

    requires: [ 
     'store.exampleStore' 
    ], 
    modal: true, 
    draggable: true, 
    header: { 
     title: 'Technical Advisors Contact Information', 
     height: 55, 
     items: [{ 
      xtype: 'button', 
      text: 'X', 
      listeners: { click: 'onModalX' } 
     }] 
    }, 
    scrollable: true, 
    align: 'center', 
    floating: true, 
    width: 1500, 
    height: 800, 

    items: [{ 
     xtype: 'grid', 
     title: 'Region: ME', 
     scrollable: true, 
     collapsible: true, 
     store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] }, 
     columns: [{ 
      text: 'Contact', 
      dataIndex: 'ContactName', 
      sortable: true, 
      flex: 2 
     }, { 
      text: 'Office #', 
      dataIndex: 'Office', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Home #', 
      dataIndex: 'Home', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Pager #', 
      dataIndex: 'Pager', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Cellular #', 
      dataIndex: 'Cellular', 
      sortable: true, 
      flex: 1 
     }, { 
      text: 'Area', 
      dataIndex: 'Region', 
      sortable: true, 
      flex: 3 
     }] //continues... 

Answer 1

Pour la première, vous avez besoin d'obtenir des données sur le côté client (dans le navigateur). Cela peut être fait via une requête ajax (jsonp, ext.direct, reste, etc.).

Ensuite, vous pouvez charger des données dans votre magasin:

grid.store.loadData(result.data); 

Vous pouvez le faire manuellement, ou lire les procurations dans ExtJS. La façon la plus simple de commencer est rest-proxy.