Extjs 4 - bir ağaç paneli için model oluşturma

Question

Sunucudan dinamik olarak yüklenen (Json olarak) ve özel bir veri modeliyle bir ağaç paneli uygulamak istiyorum. Ama o ağaç için bir model ve bir veri deposunu nasıl tanımlayacağımı bilmiyorum. Bazı örnekler verebilir misiniz? Mümkünse, sencha mvc tavsiyelerine (model ve veri deposu ayrı sınıflar olarak tanımlanmış) uymak isterim. Ben ExtJS 3'te bunu nasıl biliyordu ama 4.

Saygılarımızla sürümünde RG

Geçenlerde yeni bir MVC yaklaşımıyla denemiştir

Answer 1

kayboldum ve bunu treepanel ile çalışmak başardı . Özel aslında hiçbir şey:

Görünüm:

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

Mağaza:

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

Modeli:

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

Denetleyici:

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. 

Umarım yardımcı olur.

Answer 2

Bu çalışma için çok çaba harcıyorum. İhtiyacın olması durumunda sizinle paylaşmak istiyorum. İşte

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

benim modelidir:: İşte

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

benim dükkanım: Burada

benim görünümüdür

{ 
    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} 
     ] 
    }] 
} 

: Burada

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

benim json olduğunu