function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
1986anuj1986anuj 

Refreshing ext js grid panel on clicking save.

Hi,

 

I am trying to add new details using an ext js form.As well as i am showing the addeed details into a grid panes just besides it.

Currently i have to refresh the whole page after adding a new record to update it into grid panel.

Please let me know how can i refresh the grid without refreshing the whole page.

 

I have added setRedirect code in save method of controller which recalls the same page, but it results into showing the Page Editor tab 2-3 times.

 

Here is my save method code.

 

 

public PageReference doSave()

{

PageReference pRef;

insert data;

pRef = Page.Employee;

pRef.setRedirect(true);

return pRef;

}

 

 

 

 

Message Edited by 1986anuj on 04-13-2009 01:01 AM
TehNrdTehNrd
Try adding an outputPanel around your grid and then rerender this panel.
1986anuj1986anuj

Hi TeHnrD,

 

 

I have added outputPanel, but it didn't work !!!

Below is the part of code where i am using outputPanel and rendering its id.

 

Here i am calling the outputPanel id when a save button is clicked

 

 

 <apex:actionFunction name="save" action="{!doSave}" rerender="grid"/> 

 

and Here is my outputPanel code -

 

<apex:outputPanel id="grid">

    <div id="employee-form"></div>

   <div id="myContactList-grid"></div> 

</apex:outputPanel> 

 

When i click on save button, the extjs form and grid should refresh, but both disappears !!!! 

TehNrdTehNrd

Hmm, unfotunetly I'm not to familiar with ext but so I'm not sure why the grid and form would disappear unless the panel has rendered="false".

 

Sorry couldn't be of more help.

mattdarnoldmattdarnold
Hi Anuj,

I think the problem that you're having here is that you shouldn't be rerendering the outputPanel (I think when you do this it rerenders that div which had previously been injected with the Ext JS grid in your Javascript-which is why the grid disappears), but instead you should rerender the component that provides data to your grid-I assume this is a repeat component. Once you referesh that component, you should refresh the grid store and ultimately the grid.

-- Matt
1986anuj1986anuj

Hi Matt,

 

I have tried by re rendering the repeat component which is populating data into the grid.

But its also not working...nothing is happening with that change !!!

 

thanks,

Anuj 

mattdarnoldmattdarnold

Yes, but do you also reload the grid store after the update? Can you post your code and I'll take a look?

 

-- Matt

1986anuj1986anuj

Hi Matt,

 

Below is my code

 

 

 

 

 

<apex:inputHidden value="{!data.Employee_Code__c}" id="eCode"/>

<apex:actionFunction name="save" action="{!doSave}" rerender="ContactRepeat"/></apex:form>

<table><tr>

<td><div id="employee-form"></div></td>

<td><div id="myContactList-grid"></div></td>

</tr> </table> <script type="text/javascript">

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myDataString = 'var myData = [ ';

<apex:repeat value="{!employeeData1}" var="e" id="ContactRepeat">

myDataString += "['{!e.Employee_Name__c}','{!e.Designation__c}','{!e.Employee_Code__c}'],";

</apex:repeat> myDataString += "['','',''] ];";

eval(myDataString);

var store = new Ext.data.SimpleStore({fields:[{name:'Employee_Name__c'},{name:'Designation__c'},{name:'Employee_Code__c'}/*,{name:'Joining_Date__c'}*/]});

store.loadData(myData);

// CREATE THE GRID

var grid = new Ext.grid.GridPanel({store: store, columns: [

{id: 'Employee_Code__c', header: "Employee Code", width: 120, sortable: true, dataIndex: 'Employee_Code__c'}, {id: 'Employee_Name__c', header: "Employee Name", width: 50, sortable: true, dataIndex: 'Employee_Name__c'}, {id: 'Designation__c', header: "Designation", width: 120, sortable: true, dataIndex: 'Designation__c'}

],

stripeRows:true,

autoExpandColumn: 'Employee_Name__c',

height: 200,

width: 700,

title: 'MY EXT JS CONTACT LIST',

sm: new Ext.grid.RowSelectionModel({

singleSelect: true,

listeners: {

rowselect: {

fn: function(sm,index,record) {

Ext.Msg.alert('You Selected ',record.data.Employee_Code__c); Ext.get('employeeName').dom.value = record.data.Employee_Name__c;

Ext.get('employeeDesig').dom.value = record.data.Designation__c;

Ext.get('employeeCode').dom.value = record.data.Employee_Code__c;

}

}

}

})

});

grid.render('myContactList-grid');

// grid.getSelectionModel().selectFirstRow();

});

</script>

 

 thanks,

Anuj 

 

Message Edited by 1986anuj on 04-16-2009 04:32 AM