This is my sencha touch 2 code:
Ext.define("10.view.Main", {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
config: {
title: 'Main',
scrollable: 'both',
editable: false,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'radiofield',
name: 'color',
value: 'red',
label: 'Red',
checked: true
},
{
xtype: 'radiofield',
name: 'color',
value: 'blue',
label: 'Blue'
}]
}]
}
});
Here is the preview of the code. What I get is this:
I want to group my radio fields like given below.
How can I do it?
At the following link you can find an example. Hope it works for you.
http://sureshdotariya.blogspot.be/2013/05/how-to-group-radio-buttons-in-form.html
Greets
Related
The development of the mobile terminal landing interface, the runtime found that the text input box display abnormal. If you put the code in toolbar to show no problem, the house ah formPanel shows weird, the effect is as follows
enter image description here
mycode：
Ext.define('GasApp.view.main.login.Login',{
extend : 'Ext.form.Panel',
xtype : 'loginView',
requires: [
'Ext.field.Password',
'Ext.Button',
'Ext.field.Toggle',
'Ext.layout.HBox',
'Ext.Toast',
'GasApp.view.main.login.Controller'
],
alternateClassName: 'loginView',
controller : 'loginCtrl',
listeners: {
initialize: 'onLoginInitialize'
},
config:{
padding: '40 30 0 30',
items: [{
xtype: 'textfield',
name: 'account',
ui : 'text_',
label: '账号',
clearIcon:true,
required: true
},{
xtype: 'passwordfield',
name: 'password',
label: '密码',
required: true
},{
items: [{
xtype: 'togglefield',
name: 'persist',
label: '记住我',
labelTextAlign: 'right',
labelAlign: 'left',
value: true
}]
},{
xtype: 'button',
width: '100%',
text: '登 陆',
ui: 'action',
listeners: {
tap: 'onLoginClick'
}
}]
}
});
I want signature popup in my application.
'https://market.sencha.com/extensions/signature-pad-field'
This works for me but It opens one panel then on click on that panel it opens signature popup.
But I directly want to open Signature popup.
Please guide me. Thanks in advance.
By using below code as your "/signaturefield/app/view/Signature.js", you can achieve this:
Ext.define('myApp.view.Signature', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet'
],
config: {
layout: 'card',
items: [{
xtype: 'formpanel',
padding: '10 10 10 10',
items: [{
xtype: 'fieldset',
hidden: true,
items: [{
xtype: 'signaturefield',
id: 'signatureField',
sigWidth: 350,
sigHeight: 150,
label:'Enter Signature',
labelWidth: '20%'
}]
},{
xtype: 'button',
text: 'Get Data',
margin:'0 0 10 0',
action: 'getSignature'
},{
xtype: 'button',
text: 'Set Data',
action: 'setSignature'
}]
}]
},
initialize: function() {
this.callParent();
Ext.getCmp('signatureField').openCanvasSheet();
}
});
Hope this will be helpful :)
I know how to create radio button in sencha, but i want to know " how to design radio button like below "
This is what i did, almost i got it.
Ext.create('Ext.form.Panel', {
fullscreen: true,
layout: 'hbox',
defaults: {
labelWidth: '50%',
labelAlign: 'right'
},
items: [
{
xtype: 'radiofield',
name : 'color',
value: 'red',
label: 'Red',
checked: true
},
{
xtype: 'radiofield',
name : 'color',
value: 'green',
label: 'Green'
},
{
xtype: 'radiofield',
name : 'color',
value: 'blue',
label: 'Blue'
}
]
});
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 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',