PDA

View Full Version : [Solved] The Frustration is Mounting :)



cluettr
29 Jun 2007, 6:47 AM
What I Want to Do:

I want all of my code which builds the Grid within the <head></head> tags of the page I pull up in the browser. Then when making the call to the Ext.get.getUpdateManager.update function to have the grid display. I don't want to recreate the Grid each time because it is causing createStyleSheet() issues which I beleive is a known issue with Extjs and IE.

As of right now I can get a grid to work if I place it into a script and access that script directly through the browser. I cannot get the grid to work when making calls to it using a function I wrote which makes use of the Ext.get.getUpdateManager.update function. So it is not working when I perform an AJAX request. Well, it works but I run into issues after the 4th Ext.get.getUpdateManager.update manager call.

Does anyone understand what I am saying and have any advice on how to approach this. I want to build the grid when the page is called then each time I do an ajax pull to display the grid to have it render without recreating the entire grid...

VinylFox
29 Jun 2007, 6:59 AM
If im understanding what your asking for, you can call load() on your data store at any time to refresh the grid data, which does not re-create the grid. Your column model however will stay the same.

It might be usefull to post some code, so we can get an idea of what your trying to accomplish.

cluettr
29 Jun 2007, 7:41 AM
Hi VinylFox, thank you for responding.

What I am doing is a bit different. I have a div acting as a pop up menu... I call it by setting the css element to "display: block". I would assume this is the typical method used to show and hide elements. Inside that div I can select options ... I have a choice of 3 menus. Each one pulls a different script into the div via an ajax request. One of the options pulls in a script with a grid on it. So I essentially rebuild the grid each time it is called. This is leading me to issues with the createStyleSheet() problem mentioned in varoius posts.

My thinking was I could merely destroy the grid prior to creating it but to be honest I have no idea how to go about doing that. Everything I've tried either hoses the grid or fires off several javascript errors.

Here is some code that may be useful:

This is the js script included in the head tag of the main html page.



var GridUI = function() {

var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns
var dsContext;
var gridForm;


function setupDataSource() {
ds = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url: '_xml/xml_grid_contacts.php'}),

reader: new Ext.data.XmlReader({
record: 'Item',
totalRecords: 'TotalResults',
id: 'BAID'
}, [
'newname', 'phoneoffice','phonemobile','phonehome'
])
});



ds.load({params:{start:0, limit:22}});
}

function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Name',
width: 250,
sortable: true,
dataIndex: 'newname'
},

{
header: 'Office',
width:100,
sortable: true,
dataIndex: 'phoneoffice'
},
{
header: 'Mobile',
width:100,
sortable:true,
dataIndex: 'phonemobile'
},
{
header: 'Home',
width:100,
sortable: true,
dataIndex: 'phonehome'
}
]
);
}
return columnModel;
}

function buildGrid() {

gridForm = new Ext.BasicForm(
Ext.get("updategrid"),
{

}
);

grid = new Ext.grid.EditorGrid(
'contactsgrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
}
);


grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 22,
displayInfo: true,
displayMsg: 'Displaying contacts {0} - {1} of {2}',
emptyMsg: "No contacts to display"});

var gridHeaderPanel = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(
gridHeaderPanel,
[
{
text: 'Add Row',
handler: function() {
ds.add(
new Ext.data.Record(
{
description:'new task',
completed: false,
duedate: new Date(),
priority:'B',
context:'2',
newRecord:true
}
)
)
}
},
{
text: 'Delete Row',
handler: function() {
selectedRow = grid.getSelectionModel().getSelected();
if(selectedRow) {
gridForm.submit(
{
waitMsg: 'Deleting row, please wait...',
url:'http://0.0.0.0:3000/admin/deleterow',
params:{rowid:selectedRow.data.description},
success:function(form, action) {
ds.remove(selectedRow);
},
failure: function(form, action) {
alert('Oops the delete did not work out too well!');
}
}
);
}
}
} ,
{
text: 'Save Changes',
handler: function() {
jsonData = "[";

for(i=0;i<ds.getCount();i++) {
record = ds.getAt(i);
if(record.data.newRecord || record.dirty) {
jsonData += Ext.util.JSON.encode(record.data) + ",";
}
}

jsonData = jsonData.substring(0,jsonData.length-1) + "]";

console.info(jsonData);

gridForm.submit(
{
waitMsg: 'Saving changes, please wait...',
url:'http://0.0.0.0:3000/admin/updategrid',
params:{data:jsonData},
success:function(form, action) {
alert('Congrats! Your changes were saved!!!!');
},
failure: function(form, action) {
alert('Oops the delete did not work out too well!');
}
}
);
}
}
]
)
}

return {
init : function() {
setupDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();



This is the script which is pulled in via ajax.




<script>
grid.destroy();
Ext.BLANK_IMAGE_URL = 'https://enss.verizon.com/index.php';
Ext.onReady(GridUI.init, GridUI, true);
</script>

<?php require_once ("_includes/variables.inc"); ?>
<?php require_once ("_classes/user.class.php"); // class: user ?>

<?

$user = new user($baid);
$screen_width = $user->getValue('screen_width_avail'); // used to adjust panels to width of users screen
$screen_height = $user->getValue('screen_height_avail'); // used to adjust panels to height of users screen

?>

<form id="updategrid"></form>
<div id="contactsgrid" style="width:464px; height:<?= $screen_height - 241 ?>px; border: 1px solid #CCCCCC; overflow:hidden;" class="ygrid-mso"></div>

Animal
29 Jun 2007, 8:01 AM
Ext.BLANK_IMAGE_URL will already have been set by the startup in the main page.

Ext.onReady in a loaded page is redundant. The page is ready - you're running a script in it!

Just put the code to do just what you need to do between the <script></script> tags.

And that should just reload the Grid's Store if the Grid already exists.

cluettr
29 Jun 2007, 10:00 AM
Hi Animal,

So you're saying I am partially right here, correct? My issue is that when I call the second of the two scripts via tha ajax call more than 4 times I get an error and it no longer appears. My feeling is that I need to destroy the grid before reloading the ajax page somehow but I can't seem to get it work. I hope that made sense...