PDA

View Full Version : Overlay itemtap from list not working in ST v 2.0



riyaad
18 Nov 2011, 3:32 AM
Hi ST Ppl,

The code below works in ver. 1 but not in ver. 2.0. Can anyone point me in the right direction as to why and how to overcome this - Greatly appreciated.



var MovieList = new Ext.List({
title: 'Movies',
store: store,
itemTpl: itemTemplate
});


MovieList.on('itemtap',function(dataView,index,item,e){
var name = dataView.store.getAt(index).data.movie_name;
var summary = dataView.store.getAt(index).data.summary;
this.overlay = new Ext.Panel({
modal:true,
centered:true,
floating:true,
width:300,
height:320,
styleHtmlContent: true,
dockedItems:[{xtype:'toolbar', title:name}],
dock:'top',
html:'<div style="margin-bottom:10px;"><b>Summary... ' + summary + "<br/></b></div>"
});
this.overlay.show('pop');
});

mitchellsimoens
18 Nov 2011, 2:56 PM
What have you tried to migrate from ST1 to ST2?

riyaad
20 Nov 2011, 11:42 PM
Hi Mitchell Simoens

Its a list application the pulls information via JSON. Tapping on the list item should provide a summary. All this worked well in ST ver 1.x but for some reason the same code ported to ver 2.0 is not doing anything.

Here's the full code for app as ported to ver 2.0...

Any idea where I'm going wrong - appreciated.




Ext.application({
name: 'Sencha',


launch: function() {


Ext.define('Movies', {
extend: 'Ext.data.Model',
fields: [
// movie details
{name: 'movie_name', type: 'string'},
{name: 'actor_1', type: 'string'},
{name: 'actor_2', type: 'string'},
{name: 'director', type: 'string'},
{name: 'genre', type: 'string'},
{name: 'begin', type: 'string'},
{name: 'end', type: 'string'},
{name: 'rating', type: 'string'},
{name: 'score_1', type: 'string'},
{name: 'score_2', type: 'string'},
{name: 'summary', type: 'string'},
{name: 'duration', type: 'string'},
// channel details
{name: 'channel_name', type: 'string'},
{name: 'channel_short', type: 'string'},
{name: 'channel_number',type: 'string'}
]
});

var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{begin} <b>{movie_name}</b> {channel_short} [{channel_number}]',
'</tpl>'
);


var store = Ext.create('Ext.data.Store', {
model: 'Movies',
storeId: 'cStore',
proxy: {
type: 'ajax',
url: 'movies.json',
reader: {
type: 'json'
}
},
autoLoad: true
});


var MovieList = new Ext.List({
title: 'Movies',
store: store,
itemTpl: itemTemplate
});


MovieList.on('itemtap',function(dataView,index,item,e){
var name = dataView.store.getAt(index).data.movie_name;
var summary = dataView.store.getAt(index).data.summary;
this.overlay = new Ext.Panel({
modal:true,
centered:true,
floating:true,
width:300,
height:320,
styleHtmlContent: true,
dockedItems:[{xtype:'toolbar', title:name}],
dock:'top',
html:'<div style="margin-bottom:10px;"><b>Summary... ' + summary + "<br/></b></div>"
});
this.overlay.show('pop');
});


var About = new Ext.Panel({
title: 'About',
html: 'About text goes here ...'
});

var formBase = {
scroll: 'vertical',
title: 'Settings',
url : 'http://riyaad-millers-imac.local/cgi-bin/myform.cgi',
standardSubmit : true, // usually false!
items: [
{
items: [
{
xtype:'selectfield',
name: 'options',
label: 'Bouquet',
options:[
{ text:'This', value: 'this' },
{ text:'That', value: 'that' },
{ text:'Some', value: 'some' }
]
}, {
xtype:'selectfield',
name: 'options',
label: 'Movies made since',
options:[
{ text:'1920', value: '1920' },
{ text:'1930', value: '1930' },
{ text:'1940', value: '1940' },
{ text:'1950', value: '1950' },
{ text:'1960', value: '1960' },
{ text:'1970', value: '1970' },
{ text:'1980', value: '1980' },
{ text:'1990', value: '1990' },
{ text:'2000', value: '2000' },
{ text:'2010', value: '2010' }
]
},{
xtype:'selectfield',
name: 'options',
label: 'Movies rated at least',
options:[
{ text:'Avoid', value: 'Avoid' },
{ text:'Ho-hum', value: 'Ho-hum' },
{ text:'Ok', value: 'Ok' },
{ text:'Good', value: 'Good' },
{ text:'Excellent', value: 'Excellent' }
]
},
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}, {
xtype:'selectfield',
name: 'options',
label: 'Option',
options:[
{ text:'This', value: 'this' },
{ text:'That', value: 'that' },
{ text:'Some', value: 'some' }
]
}]
}
],
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text: 'Load Defaults',
ui: 'round',
handler: function() {
formBase.user = Ext.ModelMgr.create({
'name' : 'Akura',
'password': 'secret',
'email' : 'saru@sencha.com',
'options' : 'That'
}, 'User');


form.loadModel(formBase.user);
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
var model = Ext.ModelMgr.create(form.getValues(),'User');


var errors = model.validate(),message = "";
if(errors.isValid()){


if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});


} else {
Ext.each(errors.items,function(rec,i){
message += rec.message+"<br>";
});
Ext.Msg.alert("Validate", message, function(){});
return false;
}
}
}
]
}
]
};




Ext.create('Ext.tab.Panel', {
fullscreen: true,
items: [ MovieList, formBase, About ]
});


} // function end
});

AndreaCammarata
21 Nov 2011, 1:20 AM
Hi,
could you please also post the "movies.json" file?
Thank you

riyaad
21 Nov 2011, 1:35 AM
Hi Andrea Cammarata

The json file as requested ... thank you.



[
{
"channel_number" : "113",
"score_2" : 0,
"channel_short" : "MGM",
"actor_2" : "Helen Shaver",
"channel_name" : "Metro Goldwyn Mayer",
"duration" : "120",
"actor_1" : "Martin Sheen",
"rating" : "18",
"end" : "00:00:00",
"genre" : "Drama,Horror,Mystery,Thriller",
"director" : "John Schlesinger",
"summary" : "Police psychiatrist Cal Jamison helps investigate the murder of two youths, killed during a Santeria cult ritual. Ignoring the warnings of his housekeeper, Cal gets involved.",
"begin" : "00:00:00",
"movie_name" : "The Believers",
"score_1" : "5.8"
},
{
"channel_number" : "106",
"score_2" : 0,
"channel_short" : "Actio",
"actor_2" : "Jacqueline Bisset",
"channel_name" : "M-Net Action",
"duration" : "0",
"actor_1" : "Jonathan Penner",
"rating" : "16",
"end" : "01:59:59",
"genre" : "Crime,Drama,Thriller",
"director" : "",
"summary" : "A college student launches an investigation into his wealthy father's death when he suspects his mother and his uncle may have been involved. His suspicions seem cemented when the two announce their impending marriage only shortly after the death.",
"begin" : "00:00:00",
"movie_name" : "Let the Devil Wear Black",
"score_1" : "5.2"
},
{
"channel_number" : "113",
"score_2" : 0,
"channel_short" : "MGM",
"actor_2" : "Theresa Russell",
"channel_name" : "Metro Goldwyn Mayer",
"duration" : "130",
"actor_1" : "Gene Hackman",
"rating" : "16",
"end" : "00:10:00",
"genre" : "Drama,Thriller",
"director" : "",
"summary" : "Unimaginable wealth and his own tropical island are small consolations for a tormented gold prospector.",
"begin" : "00:10:00",
"movie_name" : "Eureka",
"score_1" : "5.7"
},
{
"channel_number" : "134",
"score_2" : 0,
"channel_short" : "e.tv",
"actor_2" : "Scott Brady",
"channel_name" : "e.tv",
"duration" : "79",
"actor_1" : "Richard Basehart",
"rating" : "13",
"end" : "03:29:59",
"genre" : "Crime,Drama,Film-Noir,Mystery,Thriller",
"director" : "Alfred L Werker",
"summary" : "This film-noir piece, told in semi-documentary style, follows police on the hunt for a resourceful criminal who shoots and kills a cop.",
"begin" : "00:30:00",
"movie_name" : "He Walked By Night",
"score_1" : "7.4"
},
{
"channel_number" : "113",
"score_2" : 0,
"channel_short" : "MGM",
"actor_2" : "Roddy McDowall",
"channel_name" : "Metro Goldwyn Mayer",
"duration" : "100",
"actor_1" : "Mary Steenburgen",
"rating" : "16",
"end" : "00:35:00",
"genre" : "Drama,Horror,Thriller",
"director" : "Arthur Penn",
"summary" : "Out-of-work actress accompanies the mysterious Mr Murray to an isolated house for an audition that takes a horrifying twist in this white-knuckle shocker.",
"begin" : "00:35:00",
"movie_name" : "Dead of Winter",
"score_1" : "6.2"
},
{
"channel_number" : "113",
"score_2" : 0,
"channel_short" : "MGM",
"actor_2" : "Stephen K. Hayes",
"channel_name" : "Metro Goldwyn Mayer",
"duration" : "0",
"actor_1" : "Craig Boyett",
"rating" : "16",
"end" : "00:45:00",
"genre" : "Action,Drama",
"director" : "Karl Armstrong",
"summary" : "Ku Klux Klan thugs in small-town Texas frame a young martial artist for murder.",
"begin" : "00:45:00",
"movie_name" : "Ninja Vengeance",
"score_1" : "5"
},
{
"channel_number" : "101",
"score_2" : 0,
"channel_short" : "TopMovies+2",
"actor_2" : "Eric Lloyd",
"channel_name" : "Top Movies +2",
"duration" : "97",
"actor_1" : "Tim Allen",
"rating" : "",
"end" : "01:00:00",
"genre" : "Adventure,Comedy,Family,Fantasy",
"director" : "",
"summary" : "It?s not always easy to juggle your work life and your home life, and that?s exactly what Scott Calvin learns, when he tries to keep his new family happy, whilst at the same time fulfilling his duties as Santa.",
"begin" : "01:00:00",
"movie_name" : "The Santa Clause 3: The Escape Clause",
"score_1" : "4.2"
},
{
"channel_number" : "102",
"score_2" : 0,
"channel_short" : "TopMovies+24",
"actor_2" : "Kuno Becker",
"channel_name" : "Top Movies +24",
"duration" : "115",
"actor_1" : "Stephan Dillane",
"rating" : "PG",
"end" : "01:00:00",
"genre" : "Drama,Sport",
"director" : "",
"summary" : "Santiago Munez gets his lucky break when he is transferred to Real Madrid after gaining experience with the football club Newcastle United, but the question is... will he stand up to the measure of playing alongside the likes of Beckham and Zidane at the",
"begin" : "01:00:00",
"movie_name" : "Goal II: Living The Dream",
"score_1" : "5.8"
},
{
"channel_number" : "100",
"score_2" : 0,
"channel_short" : "TopMovies",
"actor_2" : "Kuno Becker",
"channel_name" : "Top Movies",
"duration" : "115",
"actor_1" : "Stephan Dillane",
"rating" : "PG",
"end" : "01:00:00",
"genre" : "Drama,Sport",
"director" : "",
"summary" : "Santiago Munez gets his lucky break when he is transferred to Real Madrid after gaining experience with the football club Newcastle United, but the question is... will he stand up to the measure of playing alongside the likes of Beckham and Zidane at the",
"begin" : "01:00:00",
"movie_name" : "Goal II: Living The Dream",
"score_1" : "5.8"
},
{
"channel_number" : "111",
"score_2" : 0,
"channel_short" : "Showtime",
"actor_2" : "Jack Conley",
"channel_name" : "Showtime",
"duration" : "96",
"actor_1" : "Scott Wiper",
"rating" : "13",
"end" : "01:00:00",
"genre" : "Action",
"director" : "Scott Wiper",
"summary" : "Violent thriller about an undercover Chicago cop who quits his job, only to be caught up in a struggle between the FBI and local Mafia over a missing federal agent.",
"begin" : "01:00:00",
"movie_name" : "A Better Way To Die",
"score_1" : "5.4"
},
{
"channel_number" : "133",
"score_2" : 0,
"channel_short" : "SABC3",
"actor_2" : "Randy Stuart",
"channel_name" : "SABC 3",
"duration" : "140",
"actor_1" : "Grant Williams",
"rating" : "16",
"end" : "02:59:59",
"genre" : "Sci-Fi,Thriller",
"director" : "Jack Arnold",
"summary" : "When Scott Carey begins to shrink because of exposure to a combination of radiation and insecticide, medical science is powerless to help him.",
"begin" : "01:00:00",
"movie_name" : "The Incredible Shrinking Man",
"score_1" : "7.7"
},
{
"channel_number" : "103",
"score_2" : 0,
"channel_short" : "MM1",
"actor_2" : "Russell Brand",
"channel_name" : "M-Net Movies 1",
"duration" : "110",
"actor_1" : "Jonah Hill",
"rating" : "16",
"end" : "02:59:59",
"genre" : "Comedy",
"director" : "Nicholas Stoller",
"summary" : "A British rock star has one more chance - forget the drugs and booze and do a come-back concert in LA. And a green record company intern has to get him there.",
"begin" : "01:00:00",
"movie_name" : "Get Him To The Greek",
"score_1" : "6.6"
},
{
"channel_number" : "170",
"score_2" : 0,
"channel_short" : "MntHD",
"actor_2" : "Michael Douglas",
"channel_name" : "M-Net HD",
"duration" : "130",
"actor_1" : "Shia LaBeouf",
"rating" : "16",
"end" : "02:44:59",
"genre" : "Drama",
"director" : "Oliver Stone",
"summary" : "A once-mighty trader has been released from prison. He gets together with a young hotshot to warn the world of the coming slump and for revenge on a mutual enemy.",
"begin" : "01:00:00",
"movie_name" : "Wall Street: Money Never Sleeps",
"score_1" : "6.3"
},
{
"channel_number" : "101",
"score_2" : 0,
"channel_short" : "M-Net",
"actor_2" : "Michael Douglas",
"channel_name" : "M-Net",
"duration" : "130",
"actor_1" : "Shia LaBeouf",
"rating" : "16",
"end" : "02:44:59",
"genre" : "Drama",
"director" : "Oliver Stone",
"summary" : "A once-mighty trader has been released from prison. He gets together with a young hotshot to warn the world of the coming slump and for revenge on a mutual enemy.",
"begin" : "01:00:00",
"movie_name" : "Wall Street: Money Never Sleeps",
"score_1" : "6.3"
},
{
"channel_number" : "101",
"score_2" : 0,
"channel_short" : "TopMovies+2",
"actor_2" : "Joan Allen",
"channel_name" : "Top Movies +2",
"duration" : "111",
"actor_1" : "Jason Statham",
"rating" : "16",
"end" : "01:10:00",
"genre" : "Action,Sci-Fi,Thriller",
"director" : "Paul WS Anderson",
"summary" : "A man is framed for the death of his wife. The only way to regain his freedom is by taking part in an episode of a deadly reality-TV show: a car race in which all the losers die.",
"begin" : "01:10:00",
"movie_name" : "Death Race",
"score_1" : "6.6"
},
{
"channel_number" : "113",
"score_2" : 0,
"channel_short" : "MGM",
"actor_2" : "Stephen Baldwin",
"channel_name" : "Metro Goldwyn Mayer",
"duration" : "111",
"actor_1" : "Mario Van Peebles",
"rating" : "16",
"end" : "01:25:00",
"genre" : "Western",
"director" : "Mario Van Peebles",
"summary" : "A group of black shooters, along with an ostracized white soldier, form a posse of outlaws in order to take on a cruel and corrupt white colonel. They travel to the West where their leader searches for the man who lynched his father.",
"begin" : "01:25:00",
"movie_name" : "Posse",
"score_1" : "5.2"
}
]

AndreaCammarata
21 Nov 2011, 1:47 AM
The error is that you are trying to get the list store by "dataview.store" while you should use "dataview.getStore()".
If you edit your code like follows it works without any problem.



MovieList.on('itemtap',function(dataView,index,item,e){
var store = dataView.getStore();
var name = store.getAt(index).data.movie_name;
var summary = store.getAt(index).data.summary;
this.overlay = new Ext.Panel({
modal:true,
centered:true,
floating:true,
width:300,
height:320,
styleHtmlContent: true,
dockedItems:[{xtype:'toolbar', title:name}],
dock:'top',
html:'<div style="margin-bottom:10px;"><b>Summary... ' + summary + "<br/></b></div>"
});
this.overlay.show('pop');
});


Please also notice that the "overlay" config has been deprecated, so you do not longer need to use it if you already set the "centered" config to true.

Hope this helps.

riyaad
21 Nov 2011, 1:53 AM
Hi Andrea Cammarata

Thank you for your response, if the overlay's been deprecated, then how would one create a "overlay" or popup window from a list? Sorry, I'm not 100% sure what you meant by "so you do not longer need to use it if you already set the "centered" config to true."

Regards
Riyaad

AndreaCammarata
21 Nov 2011, 1:55 AM
In ST2, if you set the "centered" config to true on a component, it will be automatically set as floating / overlay.

riyaad
21 Nov 2011, 2:14 AM
Hi Andrea

Thanks for your help - I got it working

One thing I've noticed ... the panel display a bit weird, would that be due to the settings?

Oh yes, the new code that works looks like ...

Thx again.



MovieList.on('itemtap',function(dataView,index,item,e){
var store = dataView.getStore();
var name = store.getAt(index).data.movie_name;
var summary = store.getAt(index).data.summary;
var popup = new Ext.Panel({
modal:true,
centered:true,
floating:true,
width:300,
height:320,
styleHtmlContent: true,
dockedItems:[{xtype:'toolbar', title:name}],
dock:'top',
html:'<div style="margin-bottom:10px;"><b>Summary... ' + summary + "<br/></b></div>"
});
popup.show();
});

AndreaCammarata
21 Nov 2011, 2:19 AM
The problem is that in ST2 there's no more "dockedItems" but only "items" with "docked" config.
For this reason, you should change your code like follows:



var popup = new Ext.Panel({
modal:true,
centered:true,
width:300,
height:320,
styleHtmlContent: true,
items:[
{
xtype:'toolbar',
docked: 'top',
title:name
}
],
html:'<div style="margin-bottom:10px;"><b>Summary... ' + summary + "<br/></b></div>"
});


Hope this helps.

riyaad
21 Nov 2011, 2:26 AM
Absolute brilliance ... thank you
I'm getting there ... one line @ a time.

AndreaCammarata
21 Nov 2011, 2:30 AM
You are welcome ;)

riyaad
21 Nov 2011, 2:40 AM
Andrea

If don't mind me asking this - why is the popup black?
There's no code (from my side) that themes it black. :s

??

riyaad
21 Nov 2011, 3:00 AM
Hi

I've noticed that when using styleHTMLContent in conjunction with style, the previous width & height is ignored. Surely this shouldn't be the case?




var popup = new Ext.Panel({
modal:true,
centered:true,
floating:true,
width:300,
height:320,
styleHtmlContent: true,
//style: 'background-color: white;',
/*items: [
{
xtype: 'toolbar',
docked: 'top',
//title: name
}
],*/
html:'<h5>' + name + '</h5><div style="margin-bottom:10px;"><p>Summary... ' + summary + "</p></div>"
});
popup.show();

mitchellsimoens
21 Nov 2011, 7:32 AM
Just a note, in a future release (have no clue which) the docked config will change to dock.

I would not use the style config, this is better placed in a CSS file and have cls specified on your panel.

riyaad
22 Nov 2011, 12:11 AM
Thanks for the heads up :D