Extjs 4 - создание модели для панели дерева - PullRequest
Новая
       37

Extjs 4 - создание модели для панели дерева

5 голосов
/ 21 ноября 2011

Я хотел бы реализовать панель дерева с содержимым, динамически загружаемым с сервера (как Json), и с пользовательской моделью данных.Но я не знаю, как определить модель и хранилище данных для этого дерева.Можете ли вы привести несколько примеров?Если возможно, я бы хотел соответствовать рекомендациям sencha mvc (модель и хранилище данных определены как отдельные классы).Я знал, как это сделать в extjs 3, но я потерян в версии 4.

С наилучшими пожеланиями RG

Ответы [ 2 ]

14 голосов
/ 21 ноября 2011

Недавно я экспериментировал с новым подходом MVC, и мне удалось заставить его работать с панелью дерева. На самом деле ничего особенного:

Вид: 

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.

Надеюсь, это поможет.

2 голосов
/ 15 мая 2014

Я изо всех сил стараюсь заставить это работать. Я хочу поделиться с вами, если вам это нужно.

Вот мой взгляд: 

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

Вот мой магазин: 

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

Вот моя модель: 

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: 

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