Extjs 4 - creazione di un modello per un pannello ad albero

Question

Vorrei implementare un pannello ad albero con contenuto caricato dinamicamente dal server (come Json) e con un modello dati personalizzato. Ma non so come definire un modello e un archivio dati per quell'albero. Puoi fornire alcuni esempi? Se possibile, mi piacerebbe conformarmi alle raccomandazioni del sencha mvc (il modello e l'archivio dati definiti come classi separate). sapevo come farlo in ExtJS 3 ma mi sono perso nella versione 4.

migliori saluti RG

Answer 1

ho sperimentato con un nuovo approccio MVC di recente, e sono riuscito a farlo funzionare con la treepanel . Niente di speciale in realtà:

Vista:

Ext.define('RoleBuilder.view.RoleList', { 
    extend: 'Ext.tree.Panel', 
    alias: 'widget.roles', 
    title: 'Roles', 
    store: 'Roles'  
}); 

Store:

Ext.define('RoleBuilder.store.Roles', { 
    extend: 'Ext.data.TreeStore', 
    model: 'RoleBuilder.model.Role', 
    requires: 'RoleBuilder.model.Role', 
    root: { 
     text: 'Roles', 
     expanded: true   
    }, 
    proxy: { 
     type: 'ajax', 
     url: loadRolesUrl, 
     actionMethods: 'POST', 
     reader: { 
      type: 'json' 
     } 
    } 
}); 

Modello:

Ext.define('RoleBuilder.model.Role', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'id', type: 'int', mapping: 'Id' }, 
     { name: 'text', type: 'string', mapping: 'Text' }, 
     { name: 'leaf', type: 'boolean', mapping: 'Leaf' }, 
     { name: 'loaded', type: 'boolean', mapping: 'Loaded', defaultValue: false }, 
     { name: 'Properties'}, 
     { name: 'expanded', defaultValue: true } 
    ] 
}); 

Controller:

Ext.define('RoleBuilder.controller.RoleList', { 
    extend: 'Ext.app.Controller', 
    init: function() { 
     this.control({ 
      'roles': { 
       itemcontextmenu: this.onItemContextMenuClick, 
       itemclick: this.onItemClick 
      } 
     }); 

     this.application.on({ 
      'role-saved': Ext.Function.bind(this.onRoleSaved, this) 
     }); 
    }, 
..... too long, but you got the idea. 

Spero che sarà di aiuto.

Answer 2

Ho faticato tanto per farlo funzionare. Voglio condividere con te nel caso ne avessi bisogno.

Qui è la mia opinione:

Ext.define("GiipIq.view.Problem", { 
    extend: "Ext.window.Window", 
    alias: "widget.problemwindow", 
    titleAlign: "center", 
    closable: false, 
    layout: "border", 
    autoShow: true, 
    maximizable: true, 
    draggable: false, 
    resizable: false, 
    x: 0, 
    y: 0, 
    width: Ext.getBody().getViewSize().width/2, 
    height: Ext.getBody().getViewSize().height/2, 
    id: "problem-window", 

    getEastPanel: function() { 
     return { 
      region: "west", 
      xtype: "treepanel", 
      title: "Problems", 
      width: 200, 
      split: true, 
      collapsible: false, 
      floatable: false, 
      rootVisible: false, 
      useArrows: true, 
      store: Ext.create("GiipIq.store.Problems"), 
      id: "problems", 
      dockedItems: [{ 
       xtype: "toolbar", 
       dock: "bottom", 
       layout: "fit", 
       items: [{ 
        xtype: "button", 
        text: 'Click to Run Selected Problems', 
        id: "run-problems-button" 
       }] 
      }], 
      listeners: { 
       checkchange: function(node, checkedStatus, options) { 
        console.log("vp"); 
       } 
      } 
     }; 
    }, 

    getCentralPanel: function() { 
     return { 
      xtype: "tabpanel", 
      width: (Ext.getBody().getViewSize()/2) - 200, 
      bodyBorder: false, 

      items: [{ 
       title: "Problem Description", 
       id: "problem-description-tab" 
      },{ 
       xtype: "panel", 
       title: "Source Code", 
      },{ 
       xtype: "panel", 
       title: "Big O Analysis", 
      }] 
     }; 
    }, 

    initComponent: function() { 
     this.items = [ 
      this.getEastPanel(), 
      this.getCentralPanel() 
     ]; 
     this.callParent(arguments); 
    } 
}); 

Ecco il mio negozio:

Ext.define("GiipIq.store.Problems", { 
    extend: "Ext.data.TreeStore", 
    storeId:"problems-store", 
    model: "GiipIq.model.Problem", 
}); 

Ecco il mio modello:

Ext.define("GiipIq.model.Problem", { 
    extend: "Ext.data.Model", 
    fields: [ 
     { name: "text", type: "string" }, 
     { name: "leaf", type: "bool" }, 
     { name: "expanded", type: "bool" }, 
     { name: "checked", type: "bool" } 
    ], 
    proxy: { 
     type: "ajax", 
     actionMethods: { read: "GET" }, 
     api: { read: "app/problems.json", }, 
     reader: { 
      type: "json", 
      root: "children" 
     }, 
     listeners: { 
      exception: function(proxy, response, operation, opts) { 
       if(typeof(operation.error) == "string") { 
        Ext.Msg.alert("Error", "Connection to server interrupted" + operation.error); 
       } 
      } 
     } 
    } 
}); 

Ecco il mio JSON:

{ 
    success: true, 
    children: [{ 
     text: "algorithms", expanded: true, leaf: false, checked: false, children: [ 
      { text: "bit manipulation", leaf: true, checked: true }, 
      { text: "brain teaser", leaf: true, checked: true } 
     ] 
    },{ 
     text: "data structures", expanded: true, checked: false, leaf: false, children: [ 
      { text: "array and strings", leaf: true, checked: true }, 
      { text: "linked lists", leaf: true, checked: false} 
     ] 
    },{ 
     text: "knowledge based", expanded: true, leaf: false, checked: false, children: [ 
      { text: "C and C++", leaf: true, checked: false}, 
      { text: "Java", leaf: true, checked: false} 
     ] 
    }] 
}