Extjs 4 - 트리 패널에 대한 모델 만들기

Question

서버 (Json) 및 사용자 정의 데이터 모델에서 동적으로로드 된 내용으로 트리 패널을 구현하고 싶습니다. 하지만 그 트리에 대한 모델과 데이터 저장소를 정의하는 방법을 모른다. 몇 가지 예를 들려 줄 수 있습니까? 가능하면 Sencha MVC 권장 사항 (모델 및 별도의 클래스로 정의 된 데이터 저장소)을 따르고 싶습니다. 내가 extjs라는 3에서 작업을 수행하는 방법을 알고하지만 난 4

안부 에게 버전에서 RG

나는 최근에 새로운 MVC 접근 방식을 실험

Answer 1

을 잃었어요, 나는 그것이 treepanel 작업을 얻을 수 있었다 . 특별한 실제로 아무것도 :

보기 :

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

스토어 :

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

모델 :

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

컨트롤러 :

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. 

는 도움이되기를 바랍니다.

Answer 2

나는이 작업을하기에 너무 어려움을 겪고 있습니다. 당신이 필요로 할 때를 대비해서 당신과 함께 나누고 싶습니다. 여기

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

내 모델 : 여기

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

내 가게 : 여기

내이다

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

: 여기

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

내 JSON입니다