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 ..
Related
When I try to put a container as a component in the textfield (according to Button inside of an input field Sencha Touch 2.0) my app crashes. The code below is for you to get an idea of the context, im didnt double check the syntax in the post but when I comment out the last item it works fine . I think it is the xtype: 'container' that generates the error (the error is "undefined function"). What am I doing wrong here? Im so bad at this...
Ext.define('myapp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
},
})
You are right. The problem is the container inside the textfield.
When a textfield is generated and initialized it will set its original value. Since you have changed the component to container and it's not input anymore you get the problem. The initialization process calls the getValue methode of the component. Unfortunately container does not have one and that's rises the exception.
The solution to this problem is quite easy: create your custom textfield and override its getValue method.
Ext.define("MyApp.field.ButtonField", {
extend: "Ext.field.Text",
xtype: "buttonfield",
config: {
label: 'Textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]
}
},
getValue: function () {
this.getComponent().down('textfield').getValue();
},
setLabel: function ( label ) {
this.getComponent().down('textfield').setLabel( label );
}
});
Since it has an xtype you can use it as follows:
Ext.define('MyApp.view.AddAdvertView', {
extend: 'Ext.form.Panel',
xtype: 'addadvertview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Number',
'Ext.Button',
'Ext.field.Toggle',
'Ext.Container',
'MyApp.field.ButtonField'
],
config: {
title: 'AddAdvertView',
items: [
{
name: 'heading',
xtype: 'textfield',
label: 'Heading',
border: 10,
margin:'0 0 1 0',
},
{
xtype: 'buttonfield',
label: 'blub'
}
]
}
});
You have to override some more methods (e.g. setValue) if you want to use the buttonfield like a normal field. So you delegate all textfield method calls to the wrapped textfield. But that should be easy now.
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'm using Sencha Touch 2.0.1. I'm trying to get a reference to some HTML in a Container. (My objective is to read the width of the object, and shrink the font size if necessary so it fits nicely).
Here's my code:
Ext.define("SFCT.view.Flashcard", {
extend: 'Ext.Container',
xtype: 'flashcardpanel',
requires: [
'Ext.TitleBar'
],
config: {
itemId: 'mainScreen',
title: 'Flashcards',
layout: 'fit',
items: [
{
xtype: 'container',
layout: {
type: 'vbox',
pack: 'center'
},
items: [
{
xtype: 'container',
itemId: 'wordContainer'
}
],
style: 'text-align: center'
},
{
xtype: 'button',
docked: 'right',
text: 'Next',
action: 'next'
}
]
},
updateWord: function(newWord) {
var s = '<div style="font-size: 72px">' + newWord+ '</div>';
var c = Ext.ComponentQuery.query('#wordContainer')[0];
console.log(c.getHtml());
c.setHtml(s);
}
});
If I use Ext.Container.getHtml() as shown above, it returns the HTML as a string. But I'm looking for a reference to the div element itself, so that I can get its width.
Any ideas how I can do that?
Thanks.
If I'm not mistaken
c.element
Should get you a reference to the wrapped element.
What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.
Here is my main view, a plain carousel container:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.
Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?
Hey in the Compose widget replace the the part with id:'id_compose_card'
with this
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
flex: 1,
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.
Then I also replaced the attribute
height: '100%',
with this
flex:1
This will tell the vbox layout to make your component fill the remaining space.
I am new to extjs 4.0 and trying to make a hbox layout containing a list and a form,but the form is not displaying properly, only labels are visible but textfield is not visible,please rectify the code
Ext.define("Screener.view.PharmacyView", {
extend: 'Ext.Container',
requires : [ 'Screener.view.Pharmacyform' ],
xtype: 'pharmacylist',
config: {
fullscreen: true,
layout: 'hbox',
title: 'Patient Assignments',
items: [
//our patient list is built on the Patients store, and has a title and sort button
{
xtype: 'list',
id: 'patientList',
itemTpl: '{lastname}, {firstname}',
store: Ext.create('Screener.store.Patients',{
storeId: 'patientStore'
}),
items:[{
xtype: 'titlebar',
docked: 'top',
title: 'Patients',
items:[{
xtype: 'button',
text: 'Sort',
id: 'sortButton',
align: 'left'
}]
}],
flex:1,
},
{xtype : 'pharmacyform',
flex:2
}
]
}
});
and the form is as follows
Ext.define("Screener.view.Pharmacyform", {
xtype:'pharmacyform', extend: 'Ext.form.Panel', config:{ items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name', placeholder: 'nametext'
},
]} });
You need to use the alias config to declare your own xtypes I believe, try this
Ext.define("Screener.view.Pharmacyform", {
extend: 'Ext.form.Panel',
alias:'widget.pharmacyform',