Tim Siney
28 Jun 2007, 6:18 AM
Hi,
I've developed a small app which reads in JSON created by a servlet and creates a view based on this. There is a search feature in this which binds the view to another data source. This search feature reads in JSON from the same servlet based upon the search values sent to it. While the basic view works perfectly in all browsers, the search feature only functions in Firefox 2 and Safari 3, it refuses to work in IE7. No errors are thrown, the view is just blank and the empty text is displayed. This is the when first loaded in Firefox:
http://img509.imageshack.us/img509/5372/screenshot1fa6.th.jpg (http://img509.imageshack.us/my.php?image=screenshot1fa6.jpg)
When a search string is entered in IE7 this is the result:
http://img175.imageshack.us/img175/9249/screenshot2ut6.th.jpg (http://img175.imageshack.us/my.php?image=screenshot2ut6.jpg)
This is the same search string entered into Firefox 2:
http://img337.imageshack.us/img337/189/screenshot3nm7.th.jpg (http://img337.imageshack.us/my.php?image=screenshot3nm7.jpg)
Below is the code which creates this view and performs the search. The displayImages function creates the view, and the search function performs the search. Funnily enough, the clear function works on all browsers:
var view;
var RecordDef;
var pagingToolbar;
function displayImages(offset){
// create the required templates
var thumbTemplate = new Ext.Template('<div class="thumb-wrap" id="{name}">' + '<div class="thumb"><img src="{url}" title="{name}"></div>' + '<span>{shortName}</span></div>');
thumbTemplate.compile();
// initialize the View
if(!view){
RecordDef = Ext.data.Record.create([
{name: 'name', mapping: 'name'},
{name: 'size'},
{name: 'url'},
{name: 'lastmod'}
]);
// create the datastore we use to store the image data for our view
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
view = new Ext.View("thumbs", thumbTemplate,
{jsonRoot : 'images',
singleSelect: true,
totalPoperty : 'totalImages',
selectedClass: "selectedClass",
store: dataStore,
emptyText: '<div style="padding:10px;">No images match the specified filter</div>'
}
);
}
// make some values pretty for display
view.prepareData = function(data){
data.shortName = data.name.ellipse(12);
data.sizeString = formatSize(data.size);
data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
return data;
};
view.on('selectionchange', displayImage, this, {buffer:100});
view.on('dblclick', this.doCallback, this);
view.on('loadexception', this.onLoadException, this);
// lets load the data to populate our view
dataStore.load({params:{start:0, limit:40}});
//add the paging toolbar
var viewFooter = Ext.get(view.el.dom.parentNode).createChild({tag: "div", cls:"viewFooter"},view.el.dom.parentNode);
pagingToolbar = createPagingToolbar(viewFooter, dataStore);
var formatSize = function(size){
if(size < 1024) {
return size + " bytes";
} else {
return (Math.round(((size*10) / 1024))/10) + " KB";
}
};
}
// creates a paging toolbar using passed data store and attaches it to the passed node
function createPagingToolbar(node, dataStore){
var pagingToolbar = new Ext.PagingToolbar(node, dataStore, {
pageSize: 40,
displayInfo: true,
displayMsg: 'Displaying images {0} - {1} of {2}',
emptyMsg: "No images to display"
});
return pagingToolbar;
}
function clear(){
// recreate the default data store
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
// now lets change the datastore on the view
view.setStore(dataStore);
pagingToolbar.bind(dataStore);
dataStore.load({params:{start:0, limit:40}});
}
function search(){
//debugger;
// lets get the query we will use to search with
q = document.getElementById("query").value;
alert(q);
// recreate the default data store
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
// now lets change the datastore on the view
view.setStore(dataStore);
pagingToolbar.bind(dataStore);
dataStore.load({params:{start:0, limit:40, q:q}});
view.refresh();
}
function next(){
offset = offset + 10;
displayImages(offset);
}
function previous(){
}
function displayImage(view, nodes){
// lets create a new tab in the content layout and display the image which has been selected
var selNode = nodes[0];
if(selNode){
var dialog;
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:700,
height:500,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var layout = dialog.getLayout();
var contentPanel = new Ext.ContentPanel('west', {title: 'Image Attributes'});
var imagePanel = new Ext.ContentPanel('center', {title: 'Center'});
layout.beginUpdate();
layout.add('west', contentPanel);
layout.add('center', imagePanel);
layout.endUpdate();
}
dialog.show(selNode);
dialog.setTitle("Selected Image: " + selNode.id);
imagePanel.load("image_editor.jsp?img=/webManagerCore/images/" + selNode.id);
}
}
Ext.PagingToolbar.prototype.unbind = function(ds){
ds.un("beforeload", this.beforeLoad, this);
ds.un("load", this.onLoad, this);
ds.un("loadexception", this.onLoadError, this);
this.ds = undefined;
};
Ext.PagingToolbar.prototype.bind = function(ds){
ds.on("beforeload", this.beforeLoad, this);
ds.on("load", this.onLoad, this);
ds.on("loadexception", this.onLoadError, this);
this.ds = ds;
}
String.prototype.ellipse = function(maxLength){
if(this.length > maxLength){
return this.substr(0, maxLength-3) + '...';
}
return this;
};
I've loaded up Fiddler http debugger for IE7, and it does appear the URL for the search serlvet is actually being called, it just seems that the results are not being displayed. Any help would be appreciated as I am pretty perplexed with this one.
I've developed a small app which reads in JSON created by a servlet and creates a view based on this. There is a search feature in this which binds the view to another data source. This search feature reads in JSON from the same servlet based upon the search values sent to it. While the basic view works perfectly in all browsers, the search feature only functions in Firefox 2 and Safari 3, it refuses to work in IE7. No errors are thrown, the view is just blank and the empty text is displayed. This is the when first loaded in Firefox:
http://img509.imageshack.us/img509/5372/screenshot1fa6.th.jpg (http://img509.imageshack.us/my.php?image=screenshot1fa6.jpg)
When a search string is entered in IE7 this is the result:
http://img175.imageshack.us/img175/9249/screenshot2ut6.th.jpg (http://img175.imageshack.us/my.php?image=screenshot2ut6.jpg)
This is the same search string entered into Firefox 2:
http://img337.imageshack.us/img337/189/screenshot3nm7.th.jpg (http://img337.imageshack.us/my.php?image=screenshot3nm7.jpg)
Below is the code which creates this view and performs the search. The displayImages function creates the view, and the search function performs the search. Funnily enough, the clear function works on all browsers:
var view;
var RecordDef;
var pagingToolbar;
function displayImages(offset){
// create the required templates
var thumbTemplate = new Ext.Template('<div class="thumb-wrap" id="{name}">' + '<div class="thumb"><img src="{url}" title="{name}"></div>' + '<span>{shortName}</span></div>');
thumbTemplate.compile();
// initialize the View
if(!view){
RecordDef = Ext.data.Record.create([
{name: 'name', mapping: 'name'},
{name: 'size'},
{name: 'url'},
{name: 'lastmod'}
]);
// create the datastore we use to store the image data for our view
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
view = new Ext.View("thumbs", thumbTemplate,
{jsonRoot : 'images',
singleSelect: true,
totalPoperty : 'totalImages',
selectedClass: "selectedClass",
store: dataStore,
emptyText: '<div style="padding:10px;">No images match the specified filter</div>'
}
);
}
// make some values pretty for display
view.prepareData = function(data){
data.shortName = data.name.ellipse(12);
data.sizeString = formatSize(data.size);
data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
return data;
};
view.on('selectionchange', displayImage, this, {buffer:100});
view.on('dblclick', this.doCallback, this);
view.on('loadexception', this.onLoadException, this);
// lets load the data to populate our view
dataStore.load({params:{start:0, limit:40}});
//add the paging toolbar
var viewFooter = Ext.get(view.el.dom.parentNode).createChild({tag: "div", cls:"viewFooter"},view.el.dom.parentNode);
pagingToolbar = createPagingToolbar(viewFooter, dataStore);
var formatSize = function(size){
if(size < 1024) {
return size + " bytes";
} else {
return (Math.round(((size*10) / 1024))/10) + " KB";
}
};
}
// creates a paging toolbar using passed data store and attaches it to the passed node
function createPagingToolbar(node, dataStore){
var pagingToolbar = new Ext.PagingToolbar(node, dataStore, {
pageSize: 40,
displayInfo: true,
displayMsg: 'Displaying images {0} - {1} of {2}',
emptyMsg: "No images to display"
});
return pagingToolbar;
}
function clear(){
// recreate the default data store
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
// now lets change the datastore on the view
view.setStore(dataStore);
pagingToolbar.bind(dataStore);
dataStore.load({params:{start:0, limit:40}});
}
function search(){
//debugger;
// lets get the query we will use to search with
q = document.getElementById("query").value;
alert(q);
// recreate the default data store
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/webManagerCore/servlet/org.sarmy.webManager.imageManager.ListFiles'}),
reader:new Ext.data.JsonReader({
root:"images",
id:"name",
totalProperty: 'totalImages'
},
RecordDef)
});
// now lets change the datastore on the view
view.setStore(dataStore);
pagingToolbar.bind(dataStore);
dataStore.load({params:{start:0, limit:40, q:q}});
view.refresh();
}
function next(){
offset = offset + 10;
displayImages(offset);
}
function previous(){
}
function displayImage(view, nodes){
// lets create a new tab in the content layout and display the image which has been selected
var selNode = nodes[0];
if(selNode){
var dialog;
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:700,
height:500,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var layout = dialog.getLayout();
var contentPanel = new Ext.ContentPanel('west', {title: 'Image Attributes'});
var imagePanel = new Ext.ContentPanel('center', {title: 'Center'});
layout.beginUpdate();
layout.add('west', contentPanel);
layout.add('center', imagePanel);
layout.endUpdate();
}
dialog.show(selNode);
dialog.setTitle("Selected Image: " + selNode.id);
imagePanel.load("image_editor.jsp?img=/webManagerCore/images/" + selNode.id);
}
}
Ext.PagingToolbar.prototype.unbind = function(ds){
ds.un("beforeload", this.beforeLoad, this);
ds.un("load", this.onLoad, this);
ds.un("loadexception", this.onLoadError, this);
this.ds = undefined;
};
Ext.PagingToolbar.prototype.bind = function(ds){
ds.on("beforeload", this.beforeLoad, this);
ds.on("load", this.onLoad, this);
ds.on("loadexception", this.onLoadError, this);
this.ds = ds;
}
String.prototype.ellipse = function(maxLength){
if(this.length > maxLength){
return this.substr(0, maxLength-3) + '...';
}
return this;
};
I've loaded up Fiddler http debugger for IE7, and it does appear the URL for the search serlvet is actually being called, it just seems that the results are not being displayed. Any help would be appreciated as I am pretty perplexed with this one.