PDA

View Full Version : Event on Store to trigger after data is fully loaded?



Wakebrad
11 Oct 2010, 10:26 AM
I am trying to make a call after the data has been processed from the Store. I can't seem to find an event that gets triggered after the data is loaded and available. It seems like the load event should be the right one but it is returning all nulls. It still loads the images properly but after this call executes.

I've also tried the render action on the DataView, and various options on the Store itself to get this to happen.

Let me know if my strategy is right here and what I can do to fire this load after I have the data returned. Currently this load event is returning all nulls so I can't populate the lookup and populate the right panel.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var lookup = {};
var count = 0;
// Set up a model to use in our Store
Ext.regModel('dicomImageModel', {
fields: [
{name: 'dicom-image', type: 'string'}
]
});

var myStore = new Ext.data.Store({
model: 'dicomImageModel',
proxy: {
type: 'ajax',
url : '/static-images.json',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true,
load:function(ref, records, successful){
if(successful){
for(var i=0; i<records.size(); i++){
count++;
lookup[count] = records[i].url;
}
popRightPanel();
}else{
alert('Image load error.');
}
}
});

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" style="padding:0px;"><img width="256" height="256" style="padding:0px;" src="{dicom-image}"/></div>',
'</tpl>'//,
);

/* var tapMe = new function(){


};

var toolbar1 = new Ext.Toolbar({
dock: 'top',
title: 'Toolbar',
items: [{text: 'Back', ui: 'back', handler: tapMe}]
});*/

var leftPanel = new Ext.Panel({
id:'images-view',
width:256,
scroll: 'vertical',
layout:'fit',
items: [
new Ext.DataView({
store: myStore,
tpl: tpl,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})]
});

var ivTemplate = new Ext.XTemplate(
'<div class="imageViewerDiv">',
'<tpl for=".">',
'<img src="{url}" width="512" height="512">',
'</tpl>',
'</div>'
);
ivTemplate.compile();

var switchPic= function(value){
var ivEl = Ext.getCmp('image-viewer-place').body;
var data = {'url':lookup[value]};
ivTemplate.overwrite(ivEl, data);
};

var popRightPanel= function(){
var ivp = Ext.getCmp('imageViewerPanel');
ivp.add({
id: 'image-viewer-place',
width: 512,
height: 512
});

ivp.add(
new Ext.form.Slider({
id:'slider',
value: 1,
minValue: 1,
maxValue: count,
width:512,
drag : function(slider, thumb, value ){
switchPic(value);
}
})
);
switchPic(1);
}

var rightPanel = new Ext.Panel({
id:'imageViewerPanel',
flex:1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
});

var mainContainer = new Ext.Container({
fullscreen: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [leftPanel, rightPanel]
});
}
});

jay@moduscreate.com
11 Oct 2010, 3:22 PM
From your code above, you're overriding the load method of the store.
http://tdg-i.com/img/screencasts/2010-10-11_1921.png

like:


listeners: {
load : function() {
/*....*/
}

}

Wakebrad
12 Oct 2010, 4:48 PM
Thanks! That got it. Now on to the next problem = )

Quite a learning curve with this framework.

jay@moduscreate.com
12 Oct 2010, 4:49 PM
its' more complex and robust than anything else on the market :)

Wakebrad
12 Oct 2010, 4:58 PM
Yeah, I really like all of the mobile specific commands.

Let me keep my next problem inline. I'm trying to duplicate functionality similar to the Advanced DataView Example for ExtJS. Specifically the portion where I replace the picture. The image view example:


{
id: 'img-detail-panel',
region: 'east',
split: true,
width: 150,
minWidth: 150,
maxWidth: 250
}

showDetails : function(){
var selNode = this.view.getSelectedNodes();
var detailEl = Ext.getCmp('img-detail-panel').body;
if(selNode && selNode.length > 0){
selNode = selNode[0];
Ext.getCmp('ok-btn').enable();
var data = this.lookup[selNode.id];
detailEl.hide();
this.detailsTemplate.overwrite(detailEl, data);
detailEl.slideIn('l', {stopFx:true,duration:.2});
}else{
Ext.getCmp('ok-btn').disable();
detailEl.update('');
}
},

This makes sense to me logically. You replace the interior of this component with the new Template. I am trying to duplicate it without success:



var ivTemplate = new Ext.XTemplate(
'<div class="imageViewerDiv">',
'<tpl for=".">',
'<img src="{dicom-image}" width="512" height="512">',
'</tpl>',
'</div>'
);
ivTemplate.compile();

var switchPic= function(value){
var ivEl = Ext.getCmp('image-viewer-place');
var data = {'dicom-image':lookup[value]};
ivTemplate.overwrite(ivEl, data);
};

var popRightPanel= function(){
var ivp = Ext.getCmp('imageViewerPanel');
ivp.add({
id: 'image-viewer-place',
width: 512,
height: 512
});

ivp.add(
new Ext.form.Slider({
id:'slider',
value: 1,
minValue: 1,
maxValue: count,
width:512,
listeners:{
drag : function(slider, thumb, value ){
switchPic(value);
}
}
})
);
switchPic(1);
}
When I left the .body similar to the example it gave me an error because the component has no body property. Without that it gives no error, just doesn't render.

The slider and everything get rendered properly and switchPic(1) gets called, the variables all get populated in the switchPic method, the component gets pulled properly into the IvEl but it just doesn't replace the code.

The hosted page:
http://173.74.123.53:8080/dicom.html

jay@moduscreate.com
12 Oct 2010, 5:00 PM
First rule -- do not mix Ext JS code with Sencha Touch code --- bad mojo. There is no "lookup" method for containers. Ext.fx is non-existant in the Sencha touch. Therefore, el.slideIn() is not a valid method.

Boy i wish "Sencha Touch in action" was done.

Wakebrad
12 Oct 2010, 5:05 PM
Good to know. Seemed like in this case the principals made sense.

How would you recommend accomplishing this? I need to be able to change the img src of that DIV based on the slider.

Wakebrad
12 Oct 2010, 5:31 PM
Should I go back to my original idea and use the carousel and not set showAnimation? The thing is the image swap needs to be really fast, like instantaneous.

Wakebrad
13 Oct 2010, 6:03 PM
Any suggestions here? Seems like this should be able to be accomplished.