I'm trying to remove the incised line down the left side of the menu + indentation. How exactly do I set the menu's plain config in this context?
Ext.create('Ext.button.Button', {
text: 'Manage',
arrowAlign: 'right',
menu: [{
text: 'Object',
iconCls: 'object',
menu: [
Ext.create('Ext.panel.Panel')
]
}]
});
EDIT: Got it working by creating the menu outside of the button and then assigning the button's menu to it. The 'plain : true' and 'showSeparator : false' flags worked then.
Can you try to See if this works
Ext.create('Ext.button.Button', {
text: 'Manage',
arrowAlign: 'right',
menu: [{
text: 'Object',
plain : true,
showSeparator : false
iconCls: 'object',
menu: [
Ext.create('Ext.panel.Panel')
]
}]
});
Related
I made a panel in extJS that has tbar. I want to change the colour and style of text of the items in the tbar. Specifically I would like "Report Manager"'s colour to be BLUE and it should be underlined.
function panelReports(){
Ext.create('Ext.panel.Panel', {
layout: {
type: 'auto',
align: 'left'
},
renderTo: document.body,
tbar: [
{
enableToggle: true,
text: 'Report Manager',
scope : this,
handler : treeReportManager
}]
});
}
I tried this and it worked for me..
tbar: [
{
enableToggle: true,
text: '<u> Report Manager </u>',
style:{
color: 'blue'
} ,
scope : this,
handler : treeReportManager
}]
I am capturing geoposition using Cordova API and then on success, I render the current location on a Google map.
When I first do a get_position using I render a form as follows:
var geo_panel = new Ext.form.Panel({
useCurrentLocation: true,
fullscreen: true,
layout: 'fit',
items: obj
});
Where obj is a toolbar defined as
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
alias : 'widget.geolocationToolbar',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
{
xtype: 'button',
itemId: 'stopWatch',
text: 'StopWatch',
iconCls: 'arrow_right',
iconMask: true,
handler: function() {
EvaluateIt.utils.UtilityService.clear_watch();
}
},
{
xtype: 'selectfield',
itemId: 'accuracy',
autoSelect: false,
placeHolder: 'accuracy',
options: [
{text: ''},
{text: 'high', value: 5},
{text: 'med high', value: 10},
{text: 'medium', value: 15},
{text: 'med low', value: 20},
{text: 'low', value: 66}
],
listeners: {
change: function(field, value) {
if (value instanceof Ext.data.Model) {
value = value.get(field.getValueField());
}
console.log(value);
// set accuracy as config variable
EvaluateIt.config.accuracy = value;
}
}
},
{
iconCls: 'home',
handler: function() {
google_map.getMap().panTo(position);
}
}
]
});
This renders just fine in my form panel.
My onSuccess method then passes an argument to add a google_map to the geo_panel form panel.
I have tried geo_panel.add(toolbar, google_map), which works, but I then get an issue of when I hit the "Back" button in the toolbar above:
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
I have to click it twice: the first time destroys the google_map and then the second destroys the toolbar. This is a very undesirable behavior. I've tried destroying each of the items in the geo_panel, but that does other weird things. This is acting like there are multiple instances of geo_panel. Any ideas?
I figured it out: I was creating two instances of my geo_panel. I refactored the code and everything now works as desired.
I'm usign Sencha Touch 2.1 so this code should work (link I used for inspiration):
defaultBackButtonText: null,
useTitleForBackButtonText: false,
backButton: {
// ui: 'toolbar-back',
// align : 'left',
iconCls: 'back',
iconMask: true
},
But I can still see icon and text as well.
Thanks a lot.
I use an empty string instead of null for defaultBackButtonText, and it removes the text (also using ST 2.1):
defaultBackButtonText: '',
EDIT: To clarify, this is an example of the full config for a nav view with a back button using an icon with no text:
Ext.define('MyApp.view.GroupNavView', {
extend: 'Ext.navigation.View',
xtype: 'groupnavview',
config: {
defaultBackButtonText: '',
navigationBar: {
backButton: {
iconCls:'arrow_left',
iconMask: true,
ui: 'dark',
cls: 'backButton'
}
},
items: [
{
xtype: 'mylist'
}
]
}
});
I think there is no "back" iconCls available in the default theme. Try using some other icon like "home". Also, you missed the navigationBar config. It should be like this:
defaultBackButtonText : null,
navigationBar: {
backButton : {
align : 'left',
iconCls: 'home',
iconMask: true,
ui : 'plain'
}
},
As I tested, I see only home icon there - nothing else.
In the simple example of a Panel within a ViewPort, the panel will not have scrollbars for the text overflow because the default for autoScroll is false for a panel.
Here is a working example: http://jsfiddle.net/rqZ4y/ (Thanks to CD..)
Here is a slightly more involved example, featuring a GridPanel (which has autoScroll defaulting to true, so it does not need to be set explicitly!)
Ext.application({
launch: function () {
Ext.create("Ext.Viewport", {
// layout: "fit",
items: [
{
html: "Hello!"
},
{
xtype: "grid",
title: 'Simpsons Contacts',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
}
]
});
}
});
Working example: http://jsfiddle.net/gXsPk/
In this case, the grid does not have scrollbars.
I have disabled layout: "fit" in order to get both the panels to show. If I specify layout: "fit" then that causes the "Hello!" panel to take up all of the available space, and the grid is not visible at all.
If I remove the "Hello!" panel, and re-introduce the layout: "fit" option, then I get a grid with scrollbars!
Working example: http://jsfiddle.net/VBAyS/
What am I doing wrong here?!
I'm using Ext JS 4.1.1a
The default for autoScroll is false.
Set autoScroll: true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary.
Working example: http://jsfiddle.net/rqZ4y/
EDIT:
Using vbox layout should solve your issue.
I changed the layout to:
layout: { type: 'vbox', align: 'stretch' }
Next, I've added flex: 1 to the grid.
Working example: http://jsfiddle.net/gXsPk/1/
I'm new to HTML5 and using sencha touch.
Please anyone give me a full example of how to change the toolbar color.
I tried to do that using scss, but I didn't succeed.
Thanks to all answers,
Code:
//wrapped with css tag
#include sencha-toolbar-ui('yellow', #E9D890, 'bevel');
var loginPanel = new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
{
xtype: "form",
renderTo: document.body,
items: [
{
xtype: "textfield",
name: "username",
id:"txtusername",
label: "Username",
placeHolder: "your username here",
},
{
xtype: "passwordfield",
name: "password",
id:"txtpassword",
label: "Password",
placeHolder: "your password here"
},
{
width:100,
xtype:"button",
iu:"action",
text: "log in",
handler:logIn
}
]
}
],
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls:"team",
handler:tapfbHandler,
}
]
},
{
xtype:'toolbar',
dock:'top',
title:'app name',
ui:'yellow'
}]
});
Do I have to include any style file?
Thanks.
You first can try to change your Toolbar UI :
dockedItems: [
{
xtype:"toolbar",
dock: "bottom",
ui = "light",
...
Try it.
You also have the opportunity to custom your layout with specific color. I never do this, but a lot of doc is present over internet :
http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
http://existdissolve.com/2011/03/sencha-touch-theming-building-our-custom-stylesheet-with-sass
http://superdit.com/2011/07/22/sencha-touch-references-and-tutorial-collection/
Here is the doc for Toolbar :
http://docs.sencha.com/touch/1-1/#!/api/Ext.Toolbar
let us know what happend
Edit : To compile your Scss (Saas), try this : compass compile path/to/scss
here is a good guide all is wrote http://www.sencha.com/forum/showthread.php?127607-Mastering-the-Compass-SASS-Setup-with-Sencha-Touch