PDA

View Full Version : To and Fro navigation in a panel



tangalla
3 Jul 2012, 6:19 AM
Hi,
I am using ExtJS 4.1 , In my application there is to and fro navigation i mean
I have 2 widgets on my page the top widget is with a grid panel and buttons and the second widget contains a panel with some data. The below panel displays data based on grid selection. if i multi select the grid i should be able to navigates between those selections.
For example if i select 3 row in the grid, on the panel i should see some thing like " ITEMS 1\3" . I have to display one one item at a time and user should be able to navigate.
Please suggest me how can i do this. Thanks in advance..

sword-it
3 Jul 2012, 11:59 PM
Hi,

May you provide your code for better understanding the problem

tangalla
5 Jul 2012, 5:12 AM
Sorry for not providing the code but , i can explain in detail..

I have grid panel with one check box column. user can check more than one row , the checked row which contains detailed description which is displays in the panel.For example if user checks 2 rows panel should display 2 rows details. to view 2 rows user have to navigate between the rows in the panel , i mean it should be some thing like ITEMS 1/2 or ITEM 2/2 . or next/previous.

sword-it
5 Jul 2012, 5:57 AM
Hi!
i am assuming you have a grid, a form and two buttons named next and back.

try this:-




// getting selected records from grid
selectedRecords=grid.getSelectionModel().getSelection();
if (selectedRecords.length!>0){
nxtButton.disable();
}
currentRecord=0;
form.loadRecord(selectedRecords[0]);
backButton.disable();








// next button handler
handler:function(nxtBtn){
if(selectedRecords.length>currrentRecord){ // filling next record
currentRecord=currentRecord+1;
form.loadRecord(selectedRecords[currentRecord]);
}
if(currentRecord>0 && backBtn.disabled==true){
backBtn.enable();
}
if(selectedRecords.length==currentRecord){ // checking if end of records
nexBtn.disable();
}
}


//back button handler


handler:function(backBtn){
if(nxtBtn.disabled==true){
nxtbtn.enable()
}
currentRecord=currentRecord-1;
if(currentRecord >=0){
form.loadRecord(selectedRecords[currentRecord]);
if(currentRecord==0){
backBtn.disable()
}
}
}

tangalla
5 Jul 2012, 6:05 AM
I will try this and update you. Thanks so much for the reply