CODEWITHSUNDEEP
htmlfacebooktwitterpanelsencha-touch-2
holy
holy

Reputation: 632

Panel overlay in Sencha touch 2


I have been working on an application using sencha touch 2 .
I have a toolbar on top which contains a button .
When i click this button i will have a panel overlay . In this panel,i want to have two items :

    var shareButton = {
                    xtype : 'button',
                    ui: 'action',
                    width:'36px',
                    height:'36px',  
                    handler : function(){ 
                    var panel=Ext.create('Ext.Panel',{
            right: 0,
            top: 20,
            modal: true,
            hideOnMaskTap: true,
            hidden: true,   
            width: 260,
            height:'70%' ,
        styleHtmlContent: true,
            scrollable: true,

items: [
{html:'<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.google.com" data-lang="en">Tweet</a></body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
    Ext.Viewport.add(panel);
    panel.show();}};

But this is not working.
In fact,i want the first one to direct me to twitter to share the URL (www.google.com).
And the second one to facebook to share "test.com".

Unfortunately ,nothing is displayed in the panel .
Thank you.

Upvotes: 1

Views: 5676

Answers (2)

Dany Y
Dany Y

Reputation: 7031

Since the overlay is called after the page is loaded, the facebook and twitter buttons should rendered again

This is the code that should be added after the overlay is shown

FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter

Upvotes: 2

rdougan
rdougan

Reputation: 7225

This works for me. THe only problem is that the Facebook like button has not got a size, so you cannot see it.

Ensure your floating panel is not scrollable. If it is scrollable, give it a fixed width and height.

Update

Here is an example on Sencha Fiddle: http://www.senchafiddle.com/#jgXtj

Ensure you are adding the panel into Ext.Viewport.

Upvotes: 0

Related Questions