Как показать ввод текста рядом с узлами дерева в ext js 4 - PullRequest
Новая
       35

Как показать ввод текста рядом с узлами дерева в ext js 4

1 голос
/ 29 августа 2011

Мне удалось создать древовидное представление [с помощью EXTJS 4] с контекстным меню [опции добавить, редактировать, удалить],

Так что, если я щелкну правой кнопкой мыши на любом из узлов дерева, появится контекстное меню,

Если я нажму «Редактировать», в выбранном узле дерева должно появиться текстовое поле с возможностью переименовать его.

Есть идеи?

Спасибо, Шри

Ответы [ 2 ]

2 голосов
/ 30 августа 2011

использовать Ext.Editor (посмотрите это демо ): 

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    }
});
tree.menu = Ext.create('Ext.menu.Menu', {
  items: [
    // ...
    {text: 'Edit', action: 'edit'},
    // ...
  ]
});
tree.on('itemcontextmenu', function(view, record, HTMLTarget, i, e) {
  // Let's save record and HTMLTarget for further use
  tree.menu.record = record;
  tree.menu.HTMLTarget = HTMLTarget;

  tree.menu.showAt(e.getXY());
  e.preventDefault();
});
tree.menu.on('click', function(menu, item, e){
  if (!item) return;
  switch(item.action) {
    // ...
    case 'edit':
      editor.startEdit(Ext.get(menu.HTMLTarget), menu.record.get('text'));
      editor.on('complete', function(me, value) {
        this.record.set('text', value);
      }, menu, {single: true});
    break;
    // ...
  };
});
1 голос
/ 29 августа 2011

отметьте это http://www.sencha.com/forum/showthread.php?2430-TreePanel-with-Context-Menu

function onItemClick(item){
        console.info('You clicked: '+ item.text);
    }

... 

var menuC = new Ext.menu.Menu({ id: 'mainContext', items: [
            { text: 'edit', handler: onItemClick } , { text: 'delete', handler: onItemClick }
            ]
});

для добавления действий для пунктов меню

...