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:'Tweet</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.
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
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.
Related
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
I'm using Extjs and trying to create a layout that fill all the browser's window apart from the navigation bar.
I created a mapPanel with extjs / geoext which it renders to a div in my content:
Ext.create('Ext.panel.Panel', {
layout: "fit",
renderTo: "view",
width:1100,
height: 500,
items: {
layout: "border",
deferredRender: false,
items: [mapPanel, tree,
]
}
});
which works fine but the layout is rendered inside the "view" div.
Can I simply override all the content of the document apart from the navigation bar ?
You can use renderTo: Ext.getBody() or wrap everything in the Viewport.
Ext.create('Ext.container.Viewport',{
items:[{
layout: "border",
deferredRender: false,
items: [mapPanel, tree]
}]
});
However, neither solution will overwrite everything that is in the body already - you will have to destroy existing content manually.
For instance if you have a splash screen:
<div id="splash" style="text-align:center; vertical-align:middle;">
<br><br>
<img src="Loading.png">
<br><br>
<progress max=100></progress>
<br><br>
Loading...
</div>
you may want to destroy that screen in your launch method of Application.js:
launch: function() {
var splash = Ext.get('splash');
if(splash) splash.destroy();
}
I have a need.. On clicking a button my datatable should be viewed in a full screen mode with option to come back to normal. If I am in full screen I shouldnot allowed to work on the parent window. I am not using windows.. I have placed my datatable inside a div. How can I achieve this??
try jQuery popup: http://jqueryui.com/dialog/#modal-form
Check out the documentation and initialize the dialog on loading the page. Here is a sample fiddle as well http://jsfiddle.net/taditdash/PHX2Y/
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
I have two questions regarding the back button in the Navigationbar element of Sencha Touch 2.
My Code
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
},
Ext.create("Ext.Button", {
text: "Button2",
align: "right",
}
],
};
Question 1
How do I stick the back button to the left side of the navigation bar?
If I set align:"left" Button1 is still on its left side.
But if I dock it to the left side I have to set a margin, which I rather avoid.
Question 2
How do I set the default text of the back button to something else then "Back".
Which configuration properties do I have to set?
not sure what you mean in q1... AFAIK Navigation Bar (as a subcomponent of Ext.navigation.View) has back button already left aligned.
Q2:
Ext.define('MyNavigator', {
extends: 'Ext.navigation.View',
xtype: 'mynavigator',
config: {
defaultBackButtonText: 'Go Back',
// back button a-la iPhone
// useTitleForBackButtonText: true
....
})
see at http://docs-devel.sencha.com/touch/2-0/#!/api/Ext.navigation.View-cfg-defaultBackButtonText for more info...
Cheers, Oleg
I'm sure a lot of people use the twitter widget that twitter provides.
Here's the code they provide:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 3,
interval: 6000,
width: 420,
height: 250,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#666666'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('apumpkinpatch').start();
</script>
You can see an example here how when you click the "feedback" tab on left side of screen, the twitter widget appears over the div. Any idea what I can do to prevent this?
I think the class for the widget is .twtr-doc according to the inspector. Anyone know if there is a css attribute I should be adding to it to stop this from happening?
EDIT -: took out IE part of question to just open it up in another question so I can mark the first answer as correct.
Re: the twitter widget being on top of the feedback div, you need to use z-index property in your styles to correct this.
Try adding z-index:100 to your feedback div. I do not have IE or I would help you debug that.