Extjs 4: creación de un modelo para un panel de árbol

Question

Me gustaría implementar un panel de árbol con contenido cargado dinámicamente desde el servidor (como Json) y con un modelo de datos personalizado. Pero no sé cómo definir un modelo y un almacén de datos para ese árbol. ¿Puedes dar algunos ejemplos? Si es posible, me gustaría cumplir con las recomendaciones de sencha mvc (el modelo y el almacén de datos se definen como clases separadas). supe cómo hacerlo en extjs 3, pero estoy perdido en la versión 4.

Saludos RG

Answer 1

he experimentado con un nuevo enfoque MVC recientemente, y me las arreglé para conseguir que funcione con el treepanel . No hay nada especial en realidad:

Vista:

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

tienda:

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

Modelo:

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

controlador:

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. 

esperan que ayude.

Answer 2

Tengo tantas dificultades para que esto funcione. Quiero compartir con usted en caso de que lo necesite.

Aquí es mi punto de vista:

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

Aquí está mi tienda:

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

Aquí es mi modelo:

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

Aquí es mi 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} 
     ] 
    }] 
}