HTML Code:
<html>
<head>
<script src="http://cdn.sencha.com/ext-4.1.1a-gpl/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.1a-gpl/resources/css/ext-all.css" />
<script>
// line for ONLY Ext 4.0.7. store.load() working
Ext.override(Ext.data.TreeStore, { load: function(options) { options = options || {}; options.params = options.params || {}; var me = this, node = options.node || me.tree.getRootNode(), root; if (!node) { node = me.setRootNode({ expanded: true }); } if (me.clearOnLoad) { node.removeAll(false); } Ext.applyIf(options, { node: node }); options.params[me.nodeParam] = node ? node.getId() : 'root'; if (node) { node.set('loading', true); } return me.callParent([options]); } });
/** PLUGIN START **/
Ext.SavingTreeBranches = function(tree_id) {
var cookieId = tree_id;
var in_array = function(value, array) {
for(var i = 0; i < array.length; i++)
if(array[i] == value) return i;
return false;
}
var get_store = function() {
var cookie_store = Ext.util.Cookies.get(cookieId);
return (cookie_store) ? cookie_store.split(',') : [] ;
}
var store_add = function(id) {
var cookie_store = get_store();
if (false === in_array(id, cookie_store)) {
Ext.util.Cookies.clear(cookieId);
cookie_store.push(id);
Ext.util.Cookies.set(cookieId, cookie_store);
}
}
var store_delete = function(id) {
var cookie_store = get_store();
var entry = in_array(id, cookie_store);
if (false !== entry) {
Ext.util.Cookies.clear(cookieId);
cookie_store.splice(entry, 1)
Ext.util.Cookies.set(cookieId, cookie_store);
}
}
Ext.getCmp(tree_id).on('itemexpand', function(node, e) {
store_add(node.data.id);
});
Ext.getCmp(tree_id).on('itemcollapse', function(node, e) {
store_delete(node.data.id);
});
Ext.getCmp(tree_id).getStore().on("load", function() {
var cookie_store = get_store();
for(var i = 0; i < cookie_store.length; i++) {
node = Ext.getCmp(tree_id).getStore().getNodeById(cookie_store[i]);
if (node) {
node.bubble(function (node) {
node.expand()
});
}
}
});
}
/** PLUGIN END **/
Ext.onReady(function() {
Ext.define('structTreeModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'visible', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'structTreeModel',
storeId:'SimpleTreeSrore',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
url: 'https://pay.masterbank.ru/ext_test/ajax.txt'
},
root: {
text: 'Структура сайта',
id: '-1', //первый родитель
expanded: true
}
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'Стартовая',
renderTo: 'tree-div',
store: store,
id: 'my_tree_id',
rootVisible: false,
height: '100%',
width: 550,
fields: ['visible'],
columns: [{
xtype: 'treecolumn',
text: 'Структура сайта',
dataIndex: 'text',
width: 400,
sortable: false
},{
width: 60,
text: 'Включено',
dataIndex: 'visible',
align: 'center'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'reload',
handler: function(){
store.load();
}
}]
}]
});
Ext.SavingTreeBranches('my_tree_id');
});
</script>
</head>
<body></body>
</html>