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
Related
I've tried to make an modern desktop web application with ext js. The main view of the app has 4 child views: menu, header, footer and center views.I wanna hide them when this login view bellow is displayed.but I don't know which trick to use.
Ext.define('App.view.auth.Login', {
extend: 'Ext.Container',
xtype: 'authlogin',
controller: 'authlogin',
cls: 'auth-login',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [{
cls: 'auth-header',
html:
'<span class="logo x-fa fa-circle-o-notch"></span>'+
'<div class="title">Coworkee</div>'+
'<div class="caption">Employee directory</div>'
}, {
xtype: 'formpanel',
reference: 'form',
layout: 'vbox',
ui: 'auth',
items: [{
xtype: 'textfield',
name: 'username',
placeholder: 'Username',
required: true
}, {
xtype: 'passwordfield',
name: 'password',
placeholder: 'Password',
required: true
}, {
xtype: 'button',
text: 'LOG IN',
iconAlign: 'right',
iconCls: 'x-fa fa-angle-right',
handler: 'onLoginTap',
ui: 'action'
}]
}, {
cls: 'auth-footer',
html:
'<div>Ext JS example</div>'+
'<a href="http://www.sencha.com" target="_blank">'+
'<span class="logo ext ext-sencha"></span>'+
'<span class="label">Sencha</span>'+
'</a>'
}]
});
Yes, Routing is the best strategy but if you don't want to use that, you can create a function which returns boolean value based on user's login status. Then you can bind that login status with any view's hidden property which will do the trick.
For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...
Ext.define('MyApp.view.Login', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My Title'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Call'
},
{
xtype: 'button',
text: 'Email'
}
]
},
{
xtype: 'container',
flex: 1,
border: 2,
items: [
{
xtype: 'formpanel',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
label: 'Field'
},
{
xtype: 'textfield',
label: 'Field'
}
]
}
]
}
]
}
]
}
});
To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property
{
xtype: 'formpanel',
scrollable: null,
items: [
...
]
}
See discussion here
Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.
Check this link for more info about layouts in Sencha Touch.
I have a problem I have been struggling with for quite a while now so hopefully someone can help me out here.
Say you have this DataView object:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
I thought I could use an instance of this DataView on different Panels like this:
var gameInfo = Ext.create('Score.view.GameInfoPanel', {
xtype: 'gameInfo',
scrollable: false,
fullscreen: false,
height: 100,
flex: 2,
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
gameInfo,
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
When would show this panel in Safari I see that the DataView is in the page/panel but it is hidden. The problem is probably that x-item-hidden is set for this DataView instance. After struggling with this for hours I have no clue why this is and how to solve this. The only suggestions I could find is that I should set the height of the DataView and make it not scrollable. All of that does not seem to work. So any feedback would be very much appreciated!
http://www.senchafiddle.com/#2Ig9U
That sample code works just fine.
"I thought I could use an instance of this DataView on different Panels like this:"
This might be a clue. Last time I tried creating and referencing the -same- object in an extjs project I ran into something similar. What you should rather do is use an alias, and instantiate it via a widget.
more or less:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
alias:'widget.scoreViewGameInfoPanel', //widgets use lazy loading
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
Ext.widget('scoreViewGameInfoPanel',{
//coz sencha hated the
//same object in 2 places last i looked
scrollable: false,
fullscreen: false,
height: 100,
flex: 2
}),
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
If you actually need the -same- panel in 2 places for selecting and stuff, then I'm not too sure.
It took a while but I finally solved it. There were a few problems with the initial code.
In the definition of the GameInfoPanel the configuration attribute 'fullscreen' should not be used. I am not exactly sure why. But from what I understood is that the view(s) in which this view is used already set this attribute. By setting it again, even when it is set to false, it will hide the view.
Furthermore the 'xtype' attribute should be set. In this case I set it to 'gameinfo'. This is because you then can configure this view in the PlayerView. Also by setting the 'id' you can refer to this instance of the GameInfoPanel in your controller. So the PlayerView looks like this in the end:
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.PlayerInfoPanel',
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info'
},
{
xtype: 'playerinfo',
id: 'currentPlayerInfoId',
flex: 1,
scrollable: false
},
{
xtype: 'gameinfo',
id: 'currentGameInfoId',
flex: 2,
scrollable: false
}
]
}
});
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 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',