Use doubleclick in Grid View

[tatoosh]

I want to use a double click in a grid view.
Whis this doubleclick a new PHP site should be open.

my code works fine with single click and without opening the page.
Doubleclick also works, but the result isn't my ID from a JSON which i loaded - it gives me the row number instead ;)

Can u help me - i started learning extjs with the help of "Learning ext JS" - great book.


Ext.onReady(function(){

// create the data store
var store = new Ext.data.JsonStore({
url: 'a_Json.php',
fields: [
{name: 'AufgabenNr', type: 'int'},
{name: 'Betreff', type: 'string'},
{name: 'Aktion_Soll_name', type: 'string'},
{name: 'AktionSollText', type: 'string'},
{name: 'Prioritaet', type: 'string'},
{name: 'Status', type: 'string'},
{name: 'Soll_Start', type: 'string'},
{name: 'Soll_Faelligkeit', type: 'string'},
{name: 'TimeStamp', type: 'string'},
{name: 'Datum_Erstellung', type: 'string'}
]
});

// load data from the url ( php file )
store.load();

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'AufgabenNr', header: "ID", width: 25, sortable: true, dataIndex: 'AufgabenNr'},
{header: 'SollStart', width: 75, sortable: true, dataIndex: 'Soll_Start'},
{header: 'Aktion', width: 90, sortable: true, dataIndex: 'Aktion_Soll_name'},
{header: 'Betreff', width: 200, sortable: true, dataIndex: 'Betreff'},
{header: 'Soll Aktion', width: 130, sortable: true, dataIndex: 'AktionSollText'},
{header: 'Prio', width: 30, sortable: true, dataIndex: 'Prioritaet'},
{header: 'Status', width: 100, sortable: true, dataIndex: 'Status'},
{header: 'Ende', width: 75, sortable: true, dataIndex: 'Soll_Faelligkeit'},
{header: 'Erstellt', width: 75, sortable: true, dataIndex: 'Datum_Erstellung'},
{header: 'letzte Aenderung', width: 120, sortable: true, dataIndex: 'TimeStamp'}
],
stripeRows: true,
height:500,
width:950,
title:'Aufgaben Liste',
// click Event Listener
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: {
fn: function(sm,index,record) {
Ext.Msg.alert('You Selected', 'Your ID: ' +record.data.AufgabenNr);
}
}
}
})
});

// render grid
grid.render('a-grid');

/*
grid.on('rowdblclick', function(grid, rowIndex) {
Ext.Msg.alert('You Selected', rowIndex);
});
*/



});

[jay@moduscreate.com]

1) stop using alerts, and start using console.log (firebug)


grid.on('rowdblclick', function(grid, rowIndex) {
var record = grid.store.getAt(rowIndex);
if (record) {
console.info('You selected ' + record.get('AufgabenNr');
}


});

[tatoosh]

great man! you really helped me a lot.

one bracket is missing in your code

('AufgabenNr'))
, so this one works for me:


grid.on('rowdblclick', function(grid, rowIndex) {
var record = grid.store.getAt(rowIndex);
if (record) {
console.info('You selected ' + record.get('AufgabenNr'));
}


});

[jay@moduscreate.com]

My apologies. Doing development inside of a web form is not my forte :)

[tatoosh]

Can u give me a tip how can i change the console output to a new tab for a tabpanel?


console.info('You selected ' + record.get('AufgabenNr'));


I tried this, but it is not working. Firebug is installed now. Thx!


function addTab(tabTitle, targetUrl){
tabPanel.add({
title: tabTitle,
iconCls: 'tabs',
closable:true
}).show();
}

[tatoosh]

Oh got it myself ;)

a variable for the tabpanel was missing.



// Configure viewport
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [
{
region: 'west',
xtype: 'panel',
html: 'West',
width: '200',
split: 'true'
},
tabPanel
]

});

[jay@moduscreate.com]

var tabPanel = Ext.getCmp('tabPanelId');
tabPanel.add({
title : record.get('AufgabenNr'),
html : 'a new tab from ' + record.get('AufgabenNr')

});

tabPanel.doLayout();

[tatoosh]

oh very fast. thanks again for your code.
i'll try it out!

[tatoosh]

oh there is on new problem.
i am using a textarea via tinyMCE in the new opened tab.
without tabbing the tinymce works fine, within the tab it wont work ....
any suggestions ??

[jay@moduscreate.com]

OK, i realize you are trying to do a lot waaaaaaaaaay too soon. First thing, get Ext JS to work natively and learn it.

That said, we generally like one post per problem.

[jay@moduscreate.com]

Oh, and use the google search on this site (upper right) for the tinyMCE thing. I believe other developers have tackled this issue.

[tatoosh]

ok i'll do so, thanks.