How to open modal window from my grid

[riverside]

Hi,
I'm newbie with ExtJS, just start my first project on to.

I have already a sortable grid with data comes through my database. Now I need to open a modal window (as popup when a row is selected) and display detailed info according selected row.

I try with below, but nothing happens




var HelloWorld = function(){
var dialog, showBtn;
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();


grid.on('rowclick', function(){
Ext.onReady(HelloWorld.init, HelloWorld, true);
});


I guess mu mistake is here:


showBtn = Ext.get('show-dialog-btn');

but I don't know how to get the 'id' of the slected row?

Hope you help me,
Thanks.

[evant]

Your problem is the way you've bound your event handler.



grid.on('rowclick', function(){
Ext.onReady(HelloWorld.init, HelloWorld, true);
});


is not correct.

You want to do this:



Ext.onReady(function()
{
//create my grid.
grid.on('rowclick', HelloWorld.init, HelloWorld);
}
);


From the documentation, you can see that the rowclick handler sends a few parameters
http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-rowclick

So your init method can receive a grid, a clicked index and an event object. You can use these to get the selected row.

[riverside]

Thank for quick reply,
Here is my full code, I made it as you suggest, but nothing changes :(



var Example = {
init : function(){
// some data yanked off the web
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();

// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{id:'change',header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

// create the Grid
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'change'
});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

grid.render();

grid.getSelectionModel().selectFirstRow();

grid.on('rowdblclick', function(e){
Ext.MessageBox.alert('Message', 'Tova e samo proba bratle');
});



showSite = function (){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 32,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();
},

toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
};

} //end function

//modal start
var HelloWorld = function(){
var dialog, showBtn;
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();

//modal end


grid.on('rowclick', HelloWorld.init, HelloWorld);

}

};
Ext.onReady(Example.init, Example);

[evant]

What do you mean 'nothing changes'?

Do you get an error or what? Do you have all the appropriate HTML?

[aongenae]

I'm trying unsuccessfully to fire a dialog when clic on a grid's row. poor little newbie

I don't find any example to do that, there are only example to fire dialog from buttons :(

I don't understand why there is still "showBtn" in the above code that "riverside" gave ...

I try the "riverside" way and nothing happened when I clic on a grid's row, and I don't get any error from firebug.
note the dialog correctly behave when I call it from a button (like the doc example)

--
_-Arnaud-_

[aongenae]

After some more research I finaly reach my goal, the dialog correctly prompt when clic on a row...

I had to change some things

change this :


var HelloWorld = function(){
var dialog, showBtn;
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();

grid.on('rowclick', HelloWorld.init, HelloWorld);



to get this :


var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

// return a public interface
return {
showDialog : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
autoTabs:true,
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();

grid.on('rowclick', HelloWorld.showDialog, HelloWorld);


I don't know why it doesn't work with the "init" but I get my result so I happy \:D/

My previous post was completely stupid, result of a lost of self control when error arise. I'm sorry for those who lose time reading it. (newbie attitude)

[riverside]

Well done, @aongenae.

But next 2 lines still confuse me, because I don't want to have a button


showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);


Also, where is the right place of 'show-dialog-btn' in the HTML?

[aongenae]

I don't understand the whole thing, but when I get rid of the three line containing "showBtn" in the code, the dialog don't appear anymore...(:|

I don't know where to put that button, there are no buttons in my test and everything behave correctly.

[riverside]

Did someone know how to make the content of this Layout Dialog dynamic? I mean to extract the corresponding data from database according the row id?

[aongenae]

And/or the way to place a grid into this dialog ???

[aongenae]

showBtn = Ext.get('show-dialog-btn');
showBtn.on('click', this.showDialog, this);


Also, where is the right place of 'show-dialog-btn' in the HTML?


I was cleaning my code, and effectively I had a button named "showBtn", when I got rid of that button, the dialog didn't want to come anymore :((

This is extremely embarrassing :s

[riverside]

I made that button invisible, this solve the problem temporarily, but I beleive there is a much clean solution, that we don't know unfortunatelly :) Nevermind, I keep trying to learn more about this matter.