i am trying to give space between the components here is the screen shot , i want to give vertical space between lables , TextFields and button but i dont find a way to do it
here is my code
Ext.define('test.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Label'
],
config: {
items: [
{
docked: 'top',
title: 'Test',
ui: 'dark',
xtype: 'titlebar'
},
{
xtype:'panel',
style:'padding:10%',
items:[ {
xtype: 'label',
html: 'User Name/Mobile Number',
},
{
xtype: 'textfield',
},{
xtype: 'label',
html: 'Password'
},{
xtype: 'textfield',
},{
xtype:'button',
text:'Login'
}]
}
]
}
});
Use the margin property to get the space between fields:
{
xtype:'panel',
defaults: {
margin: '20 0'
},
items: [
{
xtype: 'label',
html: 'User Name/Mobile Number'
},
....
Related
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 this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
items: [
{
xtype: 'button',
docked: 'right',
height: 29,
hidden: true,
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
grouped:true,
pinHeaders:false,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
}
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
My Store
I use some codes in my store
sorters:'id',
grouper:function(record) {
return record.get('id')[4];
When i write grouped:true into the list config , app doesn't run. I don't understand the reason.
I want to see same result like kitchensink example userinterface/list/disclosure section.
add this configartion in your store
groupField:'label'
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',
Very new to extjs 4.0. So i could be phrasing this incorrectly.
I have a layout with a series of nested panels. One of these panels is a form panel which i intend to use loadRecord to fill with data. Most examples i've seen using something like the following to load the records.
testForm.getForm().loadRecord(app.formStore);
However you will see below that my formpanel is nested. So how do i load the form in order to load record
title: 'Job Summary',
items: [
{
xtype: 'form',
id: 'formJobSummary',
layout: {
align: 'stretch',
type: 'hbox'
},
bodyPadding: 10,
title: '',
url: '/submit.html',
flex: 1,
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'button',
text: 'Submit'
},
{
xtype: 'button',
text: 'Cancel'
}
]
}
],
items: [
{
xtype: 'panel',
flex: 1,
items: [
{
xtype: 'radiogroup',
width: 400,
fieldLabel: 'Job Type',
items: [
{
xtype: 'radiofield',
boxLabel: 'Fix Price'
},
{
xtype: 'radiofield',
boxLabel: 'Production'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Quoted Price'
},
{
xtype: 'textfield',
fieldLabel: 'Client PO'
},
{
xtype: 'textfield',
fieldLabel: 'Job Quatity'
},
{
xtype: 'textfield',
fieldLabel: 'Files Over'
},
{
xtype: 'textfield',
fieldLabel: 'Previous JobId'
},
{
xtype: 'textfield',
fieldLabel: 'Estimate'
}
]
},
{
xtype: 'panel',
flex: 1
},
{
xtype: 'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
flex: 1
}
]
}
]
},
Here is the code which shows how to populate data in the formpanel:
Ext.onReady(function(){
//Define a model with field names mapping to the form field name
Ext.define('UserModel', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});
//Create an instance of the model with the specific value
var user = Ext.create('UserModel', {
first: 'Ajit',
last: 'Kumar'
});
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first', //this name must match with the field name in the model
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
}
}]
});
form.loadRecord(user);
});
So, the steps are:
Define a model, which must extend Ext.data.Model as the stores and
form expect the date to be in the model format
Create a form panel
Create an instance of the model with the data
Load the data in the form using the model instance