editable treegrid

w dragdrop

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.url = '/echo/json/';
    proxy.actionMethods.read = "POST";
    proxy.extraParams.json = data;
    proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}

Ext.define('MenuItem', {
    extend: 'Ext.data.Model',
     idgen:'uuid',
    fields: [
        'id',
        'parentId',
        'text',
        'href',
    {
        name: 'hrefTarget',
        defaultValue: '_blank',
        persist: false}
    ],
    proxy: {
        type: 'ajax',
        api: {
            create: '/echo/json/?c',
            read: '/echo/json/?r',
            update: '/echo/json/?u',
            destroy: '/echo/json/?d'
        },
        reader: {
            type: 'json',
            root: 'children'
        }
    }
});

sim(MenuItem.proxy, {
    children: [
        {
        text: 'Home',
        href: '/home',
        leaf: true,
            id:1,
        // ,checked:true
        },
    {
        text: 'Contact Us',
        id:2,
        href: '/contact',
        loaded:false,        
        hrefTarget: '_blank',
        qtip: 'this is my qtip',
        qtitle: 'qtip title'},
    {
        text: 'About Us',
        id:3,
        expanded: false,
        href: '/about-us',
        children: [
            {
                id:4,
            text: 'Careers',
            href: '/about-us/careers',
            leaf: true}
        ]}

    ]
}, 1);

Ext.define('Menu', {
    extend: 'Ext.data.TreeStore',
    listeners:{
        beforesync:function(options){
            console.log(options);
        }
    },
    model: 'MenuItem',
    defaultRootId: 'root',
    root: {
        text: 'Main Menu',
        expanded: true
    }
});

Ext.define('TreePanel1', {
    extend: 'Ext.tree.Panel',

    height: 250,
    title: 'Website Menu Editor',
    rootVisible: false,
    lines: true,
    hideHeaders: true,
    useArrows: true,
    frame: false,
    rowLines:...