Я пытаюсь извлечь выбранный node, если он есть, TreePanel, когда пользователь нажимает кнопку. Как получить выбор node в TreePanel? Спасибо.
Как найти выбранный node в ExtJS TreePanel?
Ответ 1
Что бы вы сделали, это создать обработчик событий. Каждый объект ExtJs имеет несколько событий, которые автоматически связаны с ними. Вы должны написать обработчик событий (функцию), который затем можно назначить прослушивателю событий. Таким образом, в этом случае вы, вероятно, захотите назначить обработчик события 'click' вашего компонента TreePanel.
var tbPan = new Ext.tree.TreePanel({
itemId:'navTree',
autoScroll: true,
root: new Ext.tree.TreeNode({
id: 'root',
text: 'My Tree Root',
rootVisible: true
}),
listeners: {
click: {
fn:clickListener
}
}
});
clickListener = function (node,event){
// The node argument represents the node that
// was clicked on within your TreePanel
};
Но что произойдет, если вы хотите узнать node, который уже выбран? В этот момент вам нужно получить доступ к модели выбора TreePanel. Вы упомянули действие кнопки. Скажем, вы хотели применить функцию к этому обработчику щелчка кнопки, чтобы получить выбранный node:
var btn = new Ext.Button({
text: 'Get Value',
handler: function (thisBtn,event){
var node = Ext.fly('navTree').getSelectionModel().getSelectedNode();
}
});
Вы использовали элемент flyweight, чтобы получить краткую ссылку на сам TreePanel, а затем использовали этот внутренний метод TreePanel для получения этой модели выбора. После этого вы использовали внутренний метод Selection Model (в данном случае DefaultSelectionModel), чтобы получить выбранный Node.
В документации Ext JS вы найдете множество информации. Онлайновый (и офлайн-приложение AIR) API довольно обширен. Руководство Ext Core также может дать вам представление о разработке ExtJS, даже если вы не используете Core напрямую.
Ответ 2
var tree = Ext.create('Ext.tree.Panel', {
store: store,
renderTo: 'tree_el',
height: 300,
width: 250,
title: 'ExtJS Tree PHP MySQL',
tbar : [{
text: 'get selected node',
handler: function() {
if (tree.getSelectionModel().hasSelection()) {
var selectedNode = tree.getSelectionModel().getSelection();
alert(selectedNode[0].data.text + ' was selected');
} else {
Ext.MessageBox.alert('No node selected!');
}
}
}]
});
Ответ 3
В Ext JS 4 вы можете поместить прослушиватель на панель дерева следующим образом:
listeners: {
itemclick: {
fn: function(view, record, item, index, event) {
//the record is the data node that was clicked
//the item is the html dom element in the tree that was clicked
//index is the index of the node relative to its parent
nodeId = record.data.id;
htmlId = item.id;
}
}
}
Ответ 4
var selectednode = tree.getSelectionModel().getSelectedNode();
//alert(selectednode);
if(selectednode!=tree.getRootNode())
selectednode.remove();
Ответ 5
var nodesSelected = Ext.getCmp('foldersTree').getSelectionModel().selected.items;
if(nodesSelected.length > 0)
{
var node = nodesSelected[0];
console.log(node.internalId);
}
Это для ExtJS4 TreePanel
Ответ 6
Для ExtJS 4...
В моей панели дерева добавлен следующий слушатель:
listeners:
{
itemclick: function(view, record, item, index, e)
{
selected_node = record;
}
}
где selected_node - глобальная переменная. Такие функции, как append и remove, могут использоваться с этой переменной записи, например:
selected_node.appendChild({text: 'New Node', leaf: true});
selected_node.remove();
Я создал кнопки для добавления Node и Delete Node, которые используют выше, чтобы добавить и удалить узлы в выбранный node. remove() удалит выбранный Node, а также все дочерние узлы!
Вы также можете использовать выбранный Node в любое время (выбор происходит как с левым, так и с правым щелчком мыши): var selected_node = Ext.getCmp('tree_id'). getSelectionModel(). getSelection() [0];
Ответ 7
@Steve
Ext.fly('navTree').getSelectionModel().getSelectedNode();
не будет работать, используйте
Ext.getCmp('navTree').getSelectionModel().getSelectedNode();
вместо.
Ответ 8
var myTree = Ext.getCmp('tree-panel');
var selectednode = myTree.selModel.selNode
Ответ 9
В ExtJS4 вы можете использовать метод getLastSelected(), который возвращает последний выбранный элемент в дереве.
См. ExtJS: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getLastSelected
Пример может выглядеть так:
var tree = this.up("window").down("supportedcontrolcircuitmodelselector");
var selectedCircuit = tree.getSelectionModel().getLastSelected()
Ответ 10
Простой....
itemclick: function(view, record, item, index, e)
{
alert(record.data.text);
}