ExtJS + TreePanel => реализация check дерева с пред параметрами

Question

ExtJS + TreePanel => реализация check дерева с пред параметрами

http://docs.sencha.com/ext-js/4-0/#!/example/tree/check-tree.html - По примеру пишу своё дерево.
Данные подружаются аяксом (в json обёртке).
Соответственно при открытии кого-либо узла - он разворачивается и подгружает данные.

так вот есть список узлов, которые необходимо отметить сразу (сразу подготовленные данные с корня до низшего узла ). Как можно их сразу выделить и соответственно раскрыть необходимые узлы.

Есть ли встроенные возможности? (искал в доках, но не увидел)

Код: /** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox'
]);

Ext.onReady(function() {
var storeq = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'index.php?action=ad_preset&mod=4'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});

var tree = Ext.create('Ext.tree.Panel', {
store: storeq,
rootVisible: false,
useArrows: true,
frame: false,
renderTo: 'basic_json2',
width: 350,
height: 190,
root: {
nodeType: 'async',
text: 'Мир',
id: 'geo',
expanded :true
},
dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get checked nodes',
handler: function(){
var records = tree.getView().getChecked(),
names = [];

Ext.Array.each(records, function(rec){
names.push(rec.get('text'));
});

Ext.MessageBox.show({
title: 'Selected Nodes',
msg: names.join('
'),
icon: Ext.MessageBox.INFO
});
}
}
}]
});

storeq.load();

});

Генерация: /** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .php.geshi_code {font-family:monospace;} .php.geshi_code .imp {font-weight: bold; color: red;} .php.geshi_code .kw1 {color: #b1b100;} .php.geshi_code .kw2 {color: #000000; font-weight: bold;} .php.geshi_code .kw3 {color: #990000;} .php.geshi_code .co1 {color: #666666; font-style: italic;} .php.geshi_code .co2 {color: #666666; font-style: italic;} .php.geshi_code .co3 {color: #0000cc; font-style: italic;} .php.geshi_code .co4 {color: #009933; font-style: italic;} .php.geshi_code .coMULTI {color: #666666; font-style: italic;} .php.geshi_code .es0 {color: #000099; font-weight: bold;} .php.geshi_code .es1 {color: #000099; font-weight: bold;} .php.geshi_code .es2 {color: #660099; font-weight: bold;} .php.geshi_code .es3 {color: #660099; font-weight: bold;} .php.geshi_code .es4 {color: #006699; font-weight: bold;} .php.geshi_code .es5 {color: #006699; font-weight: bold; font-style: italic;} .php.geshi_code .es6 {color: #009933; font-weight: bold;} .php.geshi_code .es_h {color: #000099; font-weight: bold;} .php.geshi_code .br0 {color: #009900;} .php.geshi_code .sy0 {color: #339933;} .php.geshi_code .sy1 {color: #000000; font-weight: bold;} .php.geshi_code .st0 {color: #0000ff;} .php.geshi_code .st_h {color: #0000ff;} .php.geshi_code .nu0 {color: #cc66cc;} .php.geshi_code .nu8 {color: #208080;} .php.geshi_code .nu12 {color: #208080;} .php.geshi_code .nu19 {color:#800080;} .php.geshi_code .me1 {color: #004000;} .php.geshi_code .me2 {color: #004000;} .php.geshi_code .re0 {color: #000088;} .php.geshi_code span.xtra { display:block; }

public function getGeoTree(){
global $CCSIS_NS;
if(!$sNode = CCSIS::input('_GET','node')){
$sNode = CCSIS::input('_POST','node');
}
if (!empty($sNode)){
if ($sNode == "geo"){
echo json_encode($this->getRegionsForExtJs());
exit;
} elseif(preg_match("/region/i",$sNode)){
$aName = explode('_',$sNode);
echo json_encode($this->getCountriesForExtJs($aName[1]));exit;
} elseif(preg_match("/country/i",$sNode)){
$aName = explode('_',$sNode);
echo json_encode($this->getCitiesForExtJs($aName[1]));exit;
}

else {
exit;
}
}

}

Пример генерации массивов (которые уходят в json): /** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ ..geshi_code {font-family:monospace;} ..geshi_code .imp {font-weight: bold; color: red;} ..geshi_code span.xtra { display:block; }

0

extjs js php treepanel

автор: ViGo5190

1 ответов

автор: maovrn · Accepted Answer · 1970-01-01 00:33:39

Да, это возможно. Причем вам даже не нужно ничего менять в ExtJs. Надо только специальным образом подготовить данные для загрузки в дерево. Так как у вас данные приходят через json, значит этим должна заняться серверная сторона. Рулить можно используя свойсвтва дерева: leaf (если есть потомки, то leaf=false), expanded (если надо отрисовать узел открытым expanded=true), expandable (если пользователь может свернуть узел, то expandable=true).
В итоге в json надо превращать примерно такой массив со вложенными массивами для потомков:

array(
'text' => 'Мир',
'id' => 'geo',
'cls' => 'folder',
'leaf' => false,
'expanded' => true,
'expandable' => true,
'children'[0] => array(
'text'=>'Южное полушарие',
'id'=>'geo1',
'cls'=>'file',
'leaf'=>true
),
'children'[1] => array(
'text'=>'Северное полушарие',
'id'=>'geo2',
'cls'=>'file',
'leaf'=>true
)
);

Естественно, формировать массив и заполнять потомков надо будет в цикле. Ручной лапшекод тут только для примера.