I am facing some problem in changing the picker view in sencha touch.
I want to call the picker in the right hand side of my view rather than coming from the bottom in a streched manner without making any changes to the sencha touch 2.1.0 libraries.
Thanks in advance.
You can set that using Enter or Exit config (or) setEnter() method on your Picker. Something like this:
xtype: 'picker',
enter: 'left',
exit: 'right',
slots: [
{
xtype: 'pickerslot',
name: 'MyPickerSlot',
title: 'MyPickerSlot',
data: [
{
text: 'One',
value: 1
},
{
text: 'Two',
value: 2
},
{
text: 'Three',
value: 3
}
]
}
]
Related
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.
I designing edit form using fieldset. For example,
items: [
{
xtype: 'textfield',
name: 'nameEn',
label: 'Name (English)',
placeholder: '',
autoCapitalize: false,
required: true,
clearIcon: true
},
{
xtype: 'textareafield',
name: 'descriptionEn',
label: 'Description (English)'
},
{
xtype: 'togglefield',
name: 'verified',
label: 'Verified'
}
]
And now I need photos (for view, but upload/remove is possible in future). I have no idea what to do.
Well, for display you can use the xtype:image (documentation here), and for upload you can use the xtype:textfield with an inputType:'file' property. However, you should note that on iOS you may not be able to do file upload without packaging an app (as mentioned in this forum post). If you want users to be able to take a picture with the camera you can use a button, and in the handler use the Ext.device.Camera component.
If you want multiple photos you may want to use an hbox layout around your image components.
Good luck!
EDIT: Here's an example of a panel with an hbox layout and horizontal scrolling. Basically, the simplest image gallery you can make in Sencha Touch (I think):
{
xtype: 'panel',
layout: 'hbox',
scrollable: { direction: 'horizontal' },
items: [
{
xtype: 'image',
src: 'path/to/image.png'
},
{
xtype: 'image',
src: 'path/to/another/image.jpg'
},
...
]
}
I have a navigation view with list(A) as its item.
On clicking the list(A) item, showing new view(B).
Now the new view(B) is having one button on clicking again change to view(C).
Problem is
view(C) is same as view(B).
I am able to create the new view and push it, but not able to populate with new data.
and on coming back to view(B), I am getting the data of view(C).
How to solve this scenario.
Code:
/**
* navigationview with list(A)
*/
Ext.define('activity', {
extend: 'Ext.navigation.View',
config: {
items:[
{
grouped:true,
pinHeaders: true,
xtype:'list',
store:{
xclass:'ActivityList'
},
itemTpl:'{title}',
emptyText: 'nothing found'
}
]
}
});
/**
* child view(B) to be appeared on clicking any item in list(A).
*/
Ext.define('TaskDetails', {
extend: 'Ext.Panel',
config: {
title: 'Task',
layout: {
type: 'fit'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
height: '40px',
items: [
{ xtype: 'spacer'},
{
xtype: 'segmentedbutton',
height: '30px',
items: [
{
text: 'Task Details',
pressed: true
},
{
text: 'Child Tasks',
badgeText: '0'
}
]
},
{ xtype: 'spacer'}
]
},
{
xtype: 'container',
items: [
{
xtype:'dataview',
store: {
xclass: 'TaskDetails'
},
itemTpl: 'some thing....'
},
{
xtype:'list',
store:{
xclass:'ChildTask'
},
itemTpl: 'some template...'
}
]
}
]
}
});
I am changing view in controller and want to show the same view(B)again with new data on clicking the list in view(B).
This is a feature of navigation view which you cannot circumvent. Use setActiveItem instead to push views... I had the same issue and changed to setActiveItem it gives you more control of your views than navigation view so
After you first load the view(2), the ref returns an array of 1, as it should. Refs only work if 1 component is returned.
After you load the view(2) again the ref returns an array of 2.
This means none of the listeners fire and the data doesn't load on new instances.
Refs bind to dom elements when controllers first see a view. We can't change that. This means we can't use a ref directly. We know the Ext.ComponentQuery.query is what refs rely on. Using that, we can simulate refs at runtime. I put a runtime dataview ref in the initialize() function of the controller to load the data for a new view. This seems to run every time a view is created, so it works.
I've got an Container (which layout is HBox) and want to dynamically slide-in a panel on the left side of it (the panel shall not use the full screen width, but e.g. 1/3 of it).
I can't get it to work.
Here is what I tried:
Ext.define('MegatheriumProject.view.MainContainer', {
extend: 'Ext.Container',
alias: 'widget.maincontainerview',
requires: ['Ext.Container', 'Ext.TitleBar'],
config: {
layout: {
type: 'hbox',
animation: {
type: 'slide',
direction: 'right'
}
},
items: [
{
flex: 3,
xtype: 'titlebar',
title: 'Megatherium',
docked: 'top',
items: [
// some items
]
}
],
// some other configuration, listeners aso
This is my NavigationPanel that shall be slided into the container:
Ext.define('MegatheriumProject.view.NavigationPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationpanelview',
requires: ['Ext.form.Panel'],
config: {
flex: 1,
// some other config
And this is the method with which I try to add it:
showNavigation: function() {
this.getMainContainerView().add(this.getNavigationPanelView());
},
... but it turned out that it appears but doesn't get animated and doesn't use flex.
Any help?
Best greetings,
Martin
Here's a way of doing it :
http://www.senchafiddle.com/#Qh35F
Hope this helped
Thanks to TDeBailleul, it works that way but does not the exact thing that I want ;).
I wanted the title bar to get animated and scrolled away, too.
The navigation sidebar by wnielson did it for me :).
I'm having trouble with the layout of a FormPanel in Sencha Touch 2. See example app below.
There should be a panel with 'vbox' layout containing 3 items: a piece of text, a FormPanel, and another piece of text. However the FormPanel seems to get size 0x0 and not show up at all, so I only see the two texts.
I found 2 things that get the form panel to show up:
Setting layout: 'fit' on the outer panel. But then everything overlaps. fit isn't really designed for more than one item, so this isn't a solution.
Settings explicit width and height config on the FormPanel. But I want it to layout itself and not have to specify this in pixels. Why would I need to do this?
I've tried a bunch of other random params, but I'm just shooting in the dark. So what am I missing?
Ext.application({
name: 'TestApp',
launch: function() {
return Ext.Viewport.add({
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center'
},
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items: [
{ html: 'Fill in the form below' },
{
xtype: 'formpanel',
// width: 300, // These fixed sizes reveal the form, but why?
// height: 300, // These fixed sizes reveal the form, but why?
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
{ html: 'Fill in the form above' }
]
});
}
});
Set scrollable property of your formpanel object to false, that will solve the problem.
{
xtype: 'formpanel',
scrollable: false,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
Update. Please note, that in newer releases of Sencha (2.3) you will have to use scrollable: null, as noticed by Nathan Do in his comment to this answer. But since it's not documented feature in can be changed in the future.
TracKer's answer is correct, but he doesn't provide an explanation for why.
Here's my take at why you need scrollable:false.. If the formpanel IS scrollable, then you need to tell Sencha how big to make it (and within that size the user can scroll around it). However, if it's NOT scrollable, it will take up the entire space it's allowed, and to get to be bigger the user can scroll around to access it.
A bit confusing =\
I kind of switched around your code a little but here's what I came up with:
Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
var paneltest = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'vbox',
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items : [
{
html : 'Fill in the form below',
flex: 1
},
{
xtype: 'formpanel',
flex: 1,
items : [
{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'username',
label : 'Username'
}]
}
]
},
{
html : 'Fill in the form above',
flex: 1
}
]
});
Ext.Viewport.add(paneltest);
}
});
My main change to your code was that I removed the
layout: {
type: 'vbox',
align: 'center'
}
and I changed it to
layout: 'vbox'
I also added a flex to your elements. This is the proper way to use the vbox and hbox layouts. I'm not totally sure why this works, however it does look like 'center' is not a valid value you can give the align attribute. I think you are looking for 'middle'. And if that doesn't give you what you are wanting maybe try to add a class or id to your panel and control the alignment with css. Hope this helps.