ExtJS 4 - एक पेड़ पैनल

Question

मैं सर्वर (JSON के रूप में) से और एक कस्टम डेटा मॉडल के साथ गतिशील रूप से भरी हुई सामग्री के साथ एक पेड़ पैनल को लागू करना चाहते हैं के लिए एक मॉडल का निर्माण। लेकिन मुझे नहीं पता कि उस पेड़ के लिए मॉडल और डेटा स्टोर को कैसे परिभाषित किया जाए। क्या आप कुछ उदाहरण प्रदान कर सकते हैं? यदि संभव हो तो, मैं Sencha MVC सिफारिशों (मॉडल और डेटा की दुकान अलग वर्ग के रूप में परिभाषित) के अनुरूप करना चाहते हैं। मैं कैसे ExtJS 3 में यह करने के लिए पता था, लेकिन मैं संस्करण में खो रहा हूँ 4.

सादर आरजी

Answer 1

मैं हाल ही में एक नया MVC दृष्टिकोण के साथ प्रयोग किया, और मैं इसे 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 है