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
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
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 am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I am new to Sencha Touch 2 and I want to have something like:
A list (eg for todos, just for trying out ST2) where I can tap to edit or set it as done etc.
I am not sure I am doing it right, but I am thinking I have a panel containing a list on the left and details view on the right. Looking at the docs for Conatiner:
//this is the Panel we'll be adding below
var aboutPanel = Ext.create('Ext.Panel', {
html: 'About this app'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'hbox',
defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
I figured I might be able to use the config property for configure my Panel:
Ext.define("SimpleTodo.view.Main", {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'panel',
config: {
html: 'Panel 1 ...'
}
},
{
xtype: 'panel',
config: {
html: 'Panel 2 ...'
}
}
]
}
});
Fails: A blank screen. If I add html property into config I get HTML shown but what I am I doing wrong with the items?
You might have also noticed, I am having a list of left and details on right. This is good for tablets, but how can I make it for phones? Do I need to use Profiles and separate views for them?
but what I am I doing wrong with the items?
You don't have a config property for panel component. So, remove the config property for each individual panel and directly use html property to set html inside each panel
Like this,
{
xtype: 'panel',
html: 'Panel 1 ...'
},
{
xtype: 'panel',
html: 'Panel 2 ...'
}
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.