PDA

View Full Version : selected tree node



m400mail
30 Nov 2011, 5:13 AM
Hello *all

i want to receive the last selected row for a tree in my contoller.
But i dont no the syntax for define this
The tree

/*
* File: app/view/ui/App_Window01.js
* Date: Tue Nov 29 2011 19:41:20 GMT+0100 (Mitteleuropäische Zeit)
*
* This file was generated by Ext Designer version 1.2.2.
* http://www.sencha.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/

Ext.define('APP02.view.user.App_Window01', {
extend: 'Ext.window.Window',
alias : 'widget.aAPPWindow01',


height: 600,
width: 800,
autoScroll: true,
activeItem: 0,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'Application',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
width: 276,
collapsed: false,
title: 'Menüoptionen',
region: 'center',
expanded: true,
collapsible:true,
titleCollapse: true,
store: store,

viewConfig: {
id: 'TREE'
},
tools: [
{
xtype: 'tool'
}
]
},
{
xtype: 'form',
id: 'GRID_USER',
bodyBorder: true,
bodyPadding: 10,
title: 'Teilnehmer',
flex: 1,
items: [
{
xtype: 'button',
id: 'BT_EDIT',
width: 80,
text: 'Ändern',
action: 'CHG'
},
{
xtype: 'button',
id: 'BT_COPY',
width: 80,
text: 'Kopieren'
},
{
xtype: 'button',
id: 'BT_NEW',
width: 80,
text: 'Neu'
},
{
xtype: 'button',
id: 'BT_DELTE',
width: 80,
text: 'Löschen'
},
{
xtype: 'gridpanel',
frameHeader: false,
preventHeader: true,
title: 'Liste Teilnehmer',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Vorname'
},
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'Telefon'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'last Change Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {

}
}
],
tools: [
{
xtype: 'tool'
}
]
}
]
});

me.callParent(arguments);
}
});




var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Sample Teilnehmer", dataid:'1' ,leaf: true },
{ text: "Maintenance Kunden", dataid:'0' ,expanded: true,
children: [
{ text: "Kundenstamm", dataid:'2' ,leaf: true },
{ text: "Kundentexte", dataid:'3' ,leaf: true}
] },
{ text: "i5 System ", dataid:'0' ,expanded: true,
children: [
{ text: "Bibliotheksliste", dataid:'5' ,leaf: true },
{ text: "Spooldateien", dataid:'6' , leaf: true}
] },
{ text: "next ....", leaf: true }
]
}
});
The store ist manually hardcoded

here the controller

Ext.define('APP02.controller.App02_controller', {
extend: 'Ext.app.Controller',

views: ['user.a_login_window', 'user.App_Window01'],
//stores:['datastore_Users'],
//models:['Model_User'],


init: function() {

//********************************************************
//Global Varaibales
//*******************************************************
Ext.define('VOData', {
singleton: true,
assid: 'www_123457890',
aCompany: 'TST',
aUsertype: '*NONE',
aString: 'teststring'
});



this.control({


'aLoginWindow button[action=speichern]': {
click: this.Save_the_Login_data
},


//////// what must i define for a selected tree node ????????????????'

'aAPPWindow01 button[action=CHG]': {
click: this.Change_on_App01_Panel
},


'aLoginWindow': {
render: this.onPanelRendered
}

});
},
//********************************************
// Function Login Data check
//**********************************************
Save_the_Login_data: function(button) {
console.log('button save click');

//********************************************
// Prüfen ob User und Passwort eingetragen
//**********************************************
var valueName = this.getFieldfromForm( 'LoginFormular', "TX_LOGIN_NAME");
if (valueName == ''){
Ext.getCmp('LoginFormular').getForm().findField('TX_LOGIN_NAME').focus(true, 10);
this.displayText ('Bitte User eingeben' );
//Ext.getCmp('TX_LOGIN_NAME').focus(true, 10);

}else{
var valuePW = this.getFieldfromForm( 'LoginFormular', "TX_PASSWORD");
if (valuePW == ''){
this.displayText ('Bitte Passwort eingeben' );
}}

//********************************************
// Anmeldung Okay Usertype= Adminuser Next Window
//**********************************************
if(valueName !== '' && valuePW !== '' ){
VOData.aUsertype = 'aAdminUser';
//this.displayText('Okay win close and start next window as ' + VOData.aUsertype);
// login window schlissen
button.up('window').close();
// Anzeige Application Panel
Ext.create('APP02.view.user.App_Window01').show();
}



console.log(valueName + ' ' +valuePW);

},




//********************************************
// Function CHG Button click
//**********************************************
Change_on_App01_Panel: function(button) {
console.log('button change on Appl01 Panel - click');


},




















//*********************************************
// Get Fieldvalue from Formular
//*********************************************
getFieldfromForm: function (aFormular, aFieldid){
return value = Ext.getCmp(aFormular).getForm().findField(aFieldid).getValue();
},




onPanelRendered: function() {
console.log('panel ist gerenderd');
// Ext.MessageBox.alert('Rendered ', 'Text2');
console.log('aGlobalVariable ' + VOData.assid + ' ' + VOData.aCompany + ' ' + VOData.aString);

},


//*********************************************
// String als Message ausgeben
//*********************************************
displayText: function (aString){
Ext.MessageBox.alert('Message', aString);
}





});

On this line
//////// what must i define for a selected tree node ????????????????

Thanks a lot

redraid
30 Nov 2011, 5:58 AM
add refs to controller:


refs: [{ref: 'aAPPWindow01', selector:'AppWindow01'}],

add itemId to tree:


itemId: 'mytree', // add
xtype: 'treepanel',
width: 276,

in controller method:


method1: function () {
var me = this,
win01 = me.getAppWindow01(), // get window by refs selector
tree = win01.down('#mytree'), // get tree by itemId
selNode = tree.selModel.getSelection()[0]; // get selected node from sel model
}

m400mail
30 Nov 2011, 6:38 AM
Hello,

thanks

but what must i define in the controller ( control section) to call the function method1 ?

redraid
30 Nov 2011, 11:11 AM
Hello,

thanks

but what must i define in the controller ( control section) to call the function method1 ?
You whant to fire controller method when tree node selected?

redraid
30 Nov 2011, 11:24 AM
Controller:


...
init: function () {
var me = this;
....
me.control({ // controll section
'AppWindow01 treepanel': {
select: me.nodeSelect // add listener to node select event
}
});
},
...
nodeSelect: function (rowModel, record, index, e) {
console.log('Selected node %o', record);
},
...


Read http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture section: Controlling the grid

m400mail
1 Dec 2011, 5:59 AM
Hi redraid

many thanks for your help

my controller

'aAPPWindow01 treepanel':{
select: this.nodeSelect
},

and the nodeselet function

nodeSelect: function (rowModel, record, index, e) {

//console.log('Selected node %o', record );
//console.log('Selected index', index );
//console.log('Selected rowModel', rowModel );
//console.log('e', e);
console.log('aid=', record.raw.aid + ' atext=' + record.raw.text );
},


if this a good way to retreive the values from a tree ?


michael

redraid
2 Dec 2011, 12:39 AM
Use record.get(field) and record.set(field, value) to get and set values.

console.log('aid=%d, atext=%s', record.get('aid'), record.get('text'));