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'
},
...
]
}
Related
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 have started to work on Sencha touch a week ago and I still no able to figured out how to create a view. I want to create textfield and listView. Listview shold be shown below the textfield. I am able to show either ListView or textfield as I am able to extend only Ext.panel or Ext.List.
Please help. Please share a link those give details about creating views in Sencha touch.
Ext.define('TrainEnquiry.view.SearchTrains', {
extend: 'Ext.Panel',
alias: "widget.searchtrains",
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'],
config: {
title: 'Train Enquiry',
items: [
{
xtype: 'fieldset',
style:'width:70%; margin:10px',
padding: '10px',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},{
xtype: 'homepagelist',
style: 'margin-Top:100px',
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}
]
}
});
Showing list views when you are also using a containing element (like a panel) is one of the trickiest things in Sencha, in my opinion. It can be done, but you have to set the layout: 'fit' property on the panel. You'll also need to dock your fieldset to the top (assuming you want it at the top, and probably turn that simple title attribute into a titlebar view within the panel. Here's a link to a SenchaFiddle demonstrating an example of how to do this, and some code for you below:
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
items: [
{
xtype: 'titlebar',
title: 'Train Enquiry',
docked: 'top'
},
{
xtype: 'fieldset',
docked: 'top',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},
{
xtype: 'list',
itemTpl: '<div class="myContent">'+
'<div><b>{name}</b> </div>' +
'</div>',
data: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
{ name: 'Item 4' }
]
}
]
});
(By the way next time keep searching, this is the question/answer that most likely would have helped you most: sencha don't seeing the list in a panel)
Avoid using inline styling.
If you want the fieldset to stick to the top of the main panel always and the list to scroll, use layout:'fit' inside the main panel config and add docked: 'top' at the fieldset config.
If you want both of them to scroll, remove main panel layout (which will take layout:'auto'), put scrollable:true in main panel config and add scrollable:false in list config. Like this:
config: {
title: 'Train Enquiry',
scrollable : true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}]
},{
xtype: 'homepagelist',
scrollable: false, // no scrolling for the list
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}]
}
Get the code here: http://www.senchafiddle.com/#x8rZo#fRzwt
I am using sencha touch to make a form.fieldset. In my model I have an image field, how can i do to display the current image of my model? My form.fieldset looks like :
/**
* This is used by the NestedList example to allow editing of an item in the Store
*/
Ext.define('ParkingSencha.view.EditorPanel', {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
id: 'editorPanel',
config: {
modal: true,
hideOnMaskTap: false,
centered: true,
width: 500,
scrollable: false,
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'keyword',
label: 'Mots clés'
},
{
xtype: 'textfield',
name: 'title',
label: 'Titre'
},
{
xtype: 'textfield',
name: 'image',
label: 'image'
}
]
}]
}]
}
});
For using / loading the image in a formfield, you need to use image component, not textfield.
Do it like this,
....
{
xtype: 'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
flex: 1
},
....
There is another solution for this take a label and set a image inside html tag ....:)
like this
{
xtype:'label',
html:'<img src="path of image ">'
}
or the boomslang ans is more than correct i will recommend you to use that ..
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.
When I create a toolbar like below the title is misplaced to the right of the last button, any ideas how to fix it?
{
xtype: 'toolbar',
docked: 'top',
title: 'Chat',
items: [{
xtype: 'button',
text: 'Places',
ui: 'back',
id: 'backToPlaces'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
text: 'People',
ui: 'forward',
id: 'toProfiles'
}
I was also fighting with the toolbar. Then I discovered the navigationbar.
The title is in the center. With a button aligned left and right. (see align property)
{
docked: 'top',
xtype: 'navigationbar',
title: 'Chat',
items: [
{
xtype: 'button',
ui: 'back',
action: 'back',
text:'BACK',
itemId: 'backButton'
},
{
xtype: 'button',
ui: 'decline',
action: 'cancel',
text:'Cancel',
itemId: 'cancelButton',
align : 'right'
}
]
}
just after answered this, i found the "centered" attribute and looked at creation of title element of sencha, so just forget this above and use in your config:
var myToolbar = new Ext.Toolbar({
docked : 'top',
title: {
title: 'my Title',
centered: true
},
items : []
});
In Sencha 2 there is no "special" title element, it is created as simple element in the "items". So i future, you can just add it at right place direcly by placing the config to your docked bar:
var myToolbar = new Ext.Toolbar({
docked : 'top',
items : [{
xtype: 'spacer',
},{
xtype: 'title',
title : 'Hello World'
},{
xtype: 'spacer',
}]
});
Only with spacer it is in the middle.
It is clearly stated in the docs that NavigationBar is a private class for internal use by the framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar and the centered attribute metioned by anj does not work as expected (at least in the latest release).
According to this post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 it is simply a bug that the title is not centered and we should wait for next release. In the meantime you might use navigationbar if you need to.
If you want to leverage something similar to how titles in Toolbar behaves of Ext.navigation.Bar. see the Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar
This class handles things like long titles for you by automatically adding ellipses and the title is always centered horizontally.
There is no longer a NavigationBar component which is public. It is simply used internally by NavigationView. You should never use this.
Instead, you should use Ext.TitleBar. This allows you to center the title config and also use the align property on items (normally buttons) to align them to the left or right.
It also has built in support when the title is too long, or any items are too wide. It will automatically limit the length of all items to a certain width, and add ellipse to the title if needed.
Here is a simple example:
var titleBar = Ext.create('Ext.TitleBar', {
docked: 'top',
title: 'Navigation',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'left'
},
{
iconCls: 'home',
iconMask: true,
align: 'right'
}
]
});
Ext.Viewport.add(titleBar);