PDA

View Full Version : Open a Model window with the details of the Grid Row when I click the grid row



shonekolathu
8 Jan 2011, 6:34 PM
I am new to EXTJS framework and I am doing a POC on EXTJS. And I really appreciate this excellent forum.

I have a grid with details of books(Title and Availability) as part of a library Project in the main panel. When I click any of the row, I am getting a Model window which have a grid with the complete details of the particular book i(Details, Who take it, When will be the return of the book, Ratings, Picture etc) .In the model window, the center Panel is the book details grid and the West Panel is the Book Picture.

Can I know How to do the following.
When I click on the row ,
a. A Model Window (Masking all other components) will open with the book title as the opened Window title.
b. The grid in the model window will have the details of the selected bookID. (I have a data store to call servlet to get the details of the particular book)


Code for Clicking the grid:

var bookDetailsWindow;
var bookStore = new Ext.data.Store({
url: 'mypoc?action=getBookDetails',
//How to pass BookID here
reader: new Ext.data.JsonReader({
root: 'rows'
,id: 'bookID'
},[
'bookTitle'
,'author'
//Other Parameters
])
});
bookStore.load();

//Grid Panel Definition here
bookGrid.getSelectionModel().on('rowSelect',
function(sm, rowIndex, record){
Ext.getBody().mask();
fnShowBookDetailsWindow(record.data.bookID);
}
...
function fnShowBookDetailsWindow(val){
if(! bookDetailsWindow){
bookDetailsWindow = new Ext.Window({
title: 'Details of Book ' + val
,id: 'bookDetailsWindowID'
,layout: 'border'
//Other Details
,items[bookGrid,picturePanel]
,buttons:[{
text: 'Close'
,handler: function(){
Ext.getBody().unmask();
bookDetailsWindow.hide();
}
}]
})
}
Ext.getCmp(' bookDetailsWindowID').title = val;//NOT WORKING

//HOW TO PASS THE PASS THE val WHICH THE BOOKID TO THE STORE bookStore and display in the grid which is a component in the bookDetailsWindow
}
Can you please help me in this

skirtle
9 Jan 2011, 2:57 PM
A few pointers...


Take a look at the modal config option for Ext.Window.
Rather than using a Store with a JsonReader, take a look at using Ext.data.JsonStore instead.
You seem to be using the name bookGrid for two different grids. Be careful it doesn't pick up the wrong grid.
You have a stray space at the start of the string in the first argument to Ext.getCmp().

There are lots of ways to pass the bookID to the window. Deciding on the best one depends on your circumstances but I would suggest writing a subclass of Ext.Window and adding a setBookId() method to it. By the looks of it you'll probably want to use the params option of the store's load() method to make a request with the bookID. Overall your code looks in need of refactoring to move each component into a separate file to keep it nice and modular.

shonekolathu
11 Jan 2011, 1:47 PM
Thanks for the reply.
For creating the modal Window, I removed the code for explicitly masking the EXT body by providing the window properties like

bookDetailsWindow = new Ext.Window({
title: 'Details of Book ' + val
,id: 'bookDetailsWindowID'
,modal: true //HERE IS THE CHANGE
,.....

For Changing the title I used

Ext.getCmp('bookDetailsWindowID').setTitle (val);

For Passing the parameters to the store, I have used


function fnShowBookDetailsWindow(val){
bookStore.load({
params: {
bookID: val
}
});
if(! bookDetailsWindow){
bookDetailsWindow = new Ext.Window({
title: 'Details of Book ' + val
,id: 'bookDetailsWindowID'
,layout: 'border'
......
})
}