ExtJS 4: TreePanel From Uploaded Xml File Without Xml Attributes

Posted By Vitaliy | March 09, 2013 | ExtJS 4.1.1
0 3507
​Xml file sample here.

Js Code

var form = win.down('form').getForm();
if (form.isValid()) {
    form.submit({
        url: '/upload/xml2',
        waitMsg: 'Uploading your xml file...',
        success: function (f, a) {
            var result = a.result,
                data = result.data,
                store = tree.getStore();

            win.close();

            store.setRootNode(data);
            tree.expandAll();
        },
        failure: function (f, a) {
            Ext.Msg.alert('Failure', a.result.msg);
        }
    });
}
            

ExtJS 4: TreePanel From Xml String

Posted By Vitaliy | February 24, 2013 | ExtJS 4.1.1
0 4103
Simple class XmlParser to retrieve tree nodes from XML string.

Js Code

try {
    if (window.DOMParser) {
        xml = new DOMParser().parseFromString(text, "text/xml");
    } else {
        xml = new ActiveXObject("Microsoft.XMLDOM");
        xml.async = false;
        xml.loadXML(text);
    }
    valid = true;
} catch (e) {
    Ext.Msg.alert('Error', e.message);
}
            

ExtJS 4: TreePanel From Uploaded Xml File

Posted By Vitaliy | February 24, 2013 | ExtJS 4.1.1
0 3776
​Xml file sample here.

Js Code

var form = win.down('form').getForm();
if (form.isValid()) {
    form.submit({
        url: '/upload/xml',
        waitMsg: 'Uploading your xml file...',
        success: function(f, a) {
            var result = a.result,
                data = result.data,
                store = tree.getStore();

            win.close();

            store.setRootNode(data);
            tree.expandAll();
        },
        failure: function(f, a) {
            Ext.Msg.alert('Failure', a.result.msg);
        }
    });
}
            

ExtJS 4 Tree: Get Selected Node

Posted By Vitaliy | February 12, 2013 | ExtJS 4.1.1
0 5299
​You should use tree's selection model - tree.getSelectionModel()

Js Code

{
    text: 'Get Selected Node',
    handler: function () {
        var panel = this.up('treepanel'),
            sm = panel.getSelectionModel(),
            node;

        if (sm.hasSelection()) {
            node = sm.getSelection()[0];
        }

        Ext.Msg.alert('Info', Ext.String.format('Selected node: <b>{0}</b>', node ? node.get('text') : 'none'));
    }
}
            

ExtJs 4.1: TreeGrid Example

Posted By Vitaliy | September 16, 2012 | ExtJS 4.1.1
0 5588
Using Ext.tree.Panel  with ASP.NET MVC 3 example.
Sources in VS 2010 Solution

Js Code

//\Scripts\app\model\MenuItem.js
Ext.define('Cms.model.MenuItem', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int', useNull: true },
        { name: 'ParentItemId', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'Url', type: 'string' },
        { name: 'CssClass', type: 'string' },
        { name: 'leaf', type: 'bool', convert: function (v, r) { return !r.raw.HasChildren; } }
    ]
});

//\Scripts\app\store\MenuItemsTree.js
Ext.define('Cms.store.MenuItemsTree', {
    extend: 'Ext.data.TreeStore',
    model: 'Cms.model.MenuItem',
    defaultRootId: '',
    proxy: {
        type: 'ajax',
        url: '/PostData/MenuItemsGetByParent'
    }
});