I want to update the toolbar's content of the main view from a subview (HotelApp.views.hotelDetail)
This is my toolbar from HotelApp.views.mainView
this.topBar = new Ext.Toolbar({
dock:'top',
id:'main_page_topbar',
title:'H10 Sencha Demo',
items:[this.back,
{xtype: 'spacer'}
]
});
The toolbar already have a back button. The problem is i can see the shape of a button, but no text either ID. What i'm doing wrong??
I use this code:
var toolbar = HotelApp.views.mainView.getDockedItems()[1];
var images = new Ext.Button({
text:'Images',
id:'images',
ui:'drastic'
})
toolbar.setTitle(record.get('nombre'));
toolbar.add({items: images});
toolbar.doLayout();
Thanks!!!
I think that your problem is only that you have to add your button calling
toolbar.add(images);
instead of
toolbar.add({items: images});
I even suggest you to don't use 'id' config for your components but 'itemId'.
In this way you can always get your views components by calling
myView.getComponent('myComponentItemId');
or
myView.getDockedComponent('myComponentItemId');
for DockedComponents like toolbars.
Hope this helps.
Related
I was wondering if it's possible to use custom animation in Sencha Touch 2. If I've done my homework correctly, then Sencha Touch by default does not provide any help with animation apart from the fade-in/out, sliders and other simple UI elements.
One would have to use CSS3 for animations, right? I wan't to use an animation (let's say something like this : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function3) in my app.
I wan't the animation to load just after the initial loading screen but I'm not sure how to do that. Can someone help me out with the code? ELI5 please,since I'm new to ST, CSS and HTML5.
In your launch function, you need to define you Ext.Anim like so :
anim = Ext.create('Ext.Anim',{
autoClear: false,
from:{'left':'0px'},
to: {'left':'100px'},
delay: 1000,
duration: 1000
});
Then you can run this animation on any component (here on a Ext.Panel) like so :
anim.run(this.getView().element);
Hope this helps
Ok #user1324579 this steps are:
Create a CSS3 class
Create one panel Sencha
On html tag put class CSS
var panel = new Ext.Panel({
id: 'yourIdPanel',
fullscreen: true,
style: 'background-color:#ffffff',
html: '<div class="animation_css_class"></div>'
})
To load you just after the initial loading screen with id panel above or,
var mainPanel = new Ext.Panel({
id:'pnlInicio',
fullscreen:true,
items : [panel],
dockedItems: []
})
I hope these helps. :)
I am very new to sencha touch. I am developing an App using sencha. I had added three buttons to toolbar. Among those three buttons when I click on one button the toolbar should have added with two more buttons dynamically in button click.My code is as follows:
this.profitChartToolbar = new Ext.Toolbar({
ui:'max',
items: [this.qButton,this.hButton,this.yButton]
});
In this way i added three buttons to toolbar. now when click on any one of the buttons i want to add two more buttons along with those three buttons. Can anyone share the solution for this ASAP.
Thanks in Advance.
you can hide the previous buttons by using button.hide()
and u can add your custom buttons by function button.add to the existing toolbar
funny task :)
var fnCreateTwoButtons = function() {
for (var i = 0; i < 2; i++) {
this.profitChartToolbar.add({
text: 'New Button #' + i);
});
}
};
this.qButton.on('tap', fnCreateTwoButtons, this);
this.hButton.on('tap', fnCreateTwoButtons, this);
this.yButton.on('tap', fnCreateTwoButtons, this);
not tested...
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.
I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.