Im writing a Sencha touch app that I want to show a popup box that has three buttons. I put a function in a controller that is supposed to display the popup, which it kind of does. My problem is that there is no background or border for the popup, so you can see right through it. Here is an example for my controller
Ext.regController('LoginController', {
'login' : function(options) {
loginPopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width : 250,
height : 250,
layout : {
align : "center",
pack : "center"
},
styleHtmlContent : true,
items : [Button1, Button2, Button3],
dockedItems : [
{
dock : 'top',
xtype : "toolbar",
title : 'Title'
}
]
loginPopup.show('pop');
All the items and dockeditems show up, but there is no background or border.
I would have posted a pic, but im apparently not reputable
Use sencha-touch.js and sencha-touch.css from same version of Sencha Touch. js and css files are different for every version of Sencha Touch. For development, import the whole Sencha release. See this. For prod keep only files that you require.
set background color for the overlay using the style property
style: 'background-color: color_of_your_choice'
Related
I'm using Sencha Touch 2, I have a PICTO declared in a button, at the moment the picto appears in black color. I would like to change it to color white.
How can I do it?
{
xtype: 'button',
text: 'Settings',
itemId: 'settingsButton',
align: 'right',
iconMask: true,
iconCls: 'settings9'
}
If you take a look at the HTML for a button that contains a picto, it looks like this :
If you click on the span with the x-icon-mask CSS class you can see that the color of the icon is set like so :
So, all you have to do is to add a CSS class to you button (ex: cls: 'myBtn') and then create add the following to your CSS file :
.myBtn .x-icon-mask {
background-color: #123456
background-image:none;
}
Hope this helped
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.
How to left align the My Toolbar text through option (not CSS override)?
var myToolbar = new Ext.Toolbar({
dock : 'top',
title: 'My Toolbar',
???
});
Thanks.
You can change the layout of the toolbar
layout: {
pack: 'justify',
align: 'left' // align center is the default
}
This will change the layout of the buttons also (if any). You can control this behavior adding spaces between the title and the buttons. See this article for more details http://www.sencha.com/forum/showthread.php?102989-docked-toolbar-and-button-positioning.-align-attribute-is-ignored.
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, about]
});
For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?
Thanks.
What you need to do is to define a new ui type using SASS and COMPASS.
So, you have to be familiar with these frameworks.
If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui
#include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);
As you can see I'm using some variables to set the wanted style.
In details:
$tabs-myUI: Is the Base color for "myUI" UI tabs.
$tabs-bar-gradient: Is The Background gradient style for tab bars.
$tabs-myUI-active: Is the Active color for "light" UI tabs.
You can define how many different UI you want and use them in your code in the following way:
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'myUI',
items: [home, about]
});
This is the official Sencha way to do it.
Hope this helps.
Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.
Obviously after this, you would style it using something like:
background-image: url(...);
background-color: pink;
#AndreaCammarata
I'm able change the tabpanel Color using your above sass.
But I'm to change the active colour of the tabs.
Please find below my code
#include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);
VIEW:
config : {
style: "background-color: white",
ui: 'tabcolour',
tabBar : {
ui: 'tabcolour',
layout : {
pack : 'center'
}
},
layout : {
type : 'card',
animation : {
type : 'fade'
}
},
items : [{
title : 'Descrption',
xtype : 'item_description'
},{
title : 'Photos',
xtype : 'Item_Photos',
}, {
title : 'Comments',
xtype : 'item_add_viewcomment'
}, {
title : 'Videoes',
xtype : 'item_video'
}
]
}