sencha touch RadioGroup not working - sencha-touch-2

Does RadioGroup works properly in sencha touch ?
Example :
var myRadioGroup = new Ext.form.RadioGroup({
id: 'myGroup',
xtype: 'radiogroup',
fieldLabel: 'Single Column',
// Arrange radio buttons into three columns, distributed vertically
columns: 3,
vertical: true,
items: [
{boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
{boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
{boxLabel: 'Item 3', name: 'rb', inputValue: '3'},
{boxLabel: 'Item 4', name: 'rb', inputValue: '4'},
{boxLabel: 'Item 5', name: 'rb', inputValue: '5'},
{boxLabel: 'Item 6', name: 'rb', inputValue: '6'}
]
});
var resultsPanel = Ext.create('Ext.Panel', {
title: 'Results',
style:"margin:50px 0 0 10px;",
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch',//, // Each takes up full width
padding: 55
},
defaults: {
labelWidth: '85%',
labelWrap: true,
labelAlign: 'right'
},
items:[{
xtype: 'radiogroup',
fieldLabel: 'RadioGroup',
items:myRadioGroup
}]
});
Ext.viewport.add(resultsPanel);
This generates the following error :
[ERR] C2008: Requirement had no matching files (Ext.form.RadioGroup) -- C:\xampp\htdocs\testRadio\app.js:17:30.
Does anyone have an idea ,i tried updating app.json (not working ) ,also i searched for RadioGroup.js in touch/src/form/ but did not find it .

Sencha don't have radio group field , It has radio field only.
refer this. http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.field.Radio
for implementing Radio group give same name to all radio field:
ex:
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
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'
}
]
});

Related

Translucent tab bar in Sencha Touch 2

I was wondering what is the best way to make the tab bar translucent (iOS7 style) and have the content scroll underneath it. I am using a tab panel. Thoughts?
I tried setting tab bar to floating:true, but:
1. tabBar seems to be intended for private use and couldn't find floating property on it
2. On doing the following on the tab panel:
tabBar: {
floating: true
},
tabBarPosition: 'bottom'
I'm just getting the tab bar to be docked on top. Thoughts?
Thanks!
As of right now, you can't achieve translucence with CSS and dynamic content underneath. If it was a static image, you could do it.
You can approximate the effect with transparency. You basically need to use a container as your tab bar and style it with "position: absolute;" and set bottom: 0. The tab bar container shouldn't be an item of the list, rather an item of a container which also has the list.
Here's a quick example: https://fiddle.sencha.com/#fiddle/26i
Ext.application({
name : 'Fiddle',
launch : function() {
var toolbar = {
xtype: 'container',
bottom: 0,
alias: 'bottomtoolbar',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Option 1',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 2',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 3',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
}
],
width: '100%',
height: 80,
style: 'position: absolute; background: rgba(255,255,255,0.9);'
};
var list = {
xtype: 'list',
itemTpl: '{title}',
items: [
{
// Spacer so end of list is selectable
xtype: 'container',
height: 80,
scrollDock: 'bottom'
}
],
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
};
Ext.Viewport.add(toolbar);
Ext.Viewport.add(list);
}
});
Granted, it's not styled very well, but you get the idea. Hope that helps.
Tabbar is docked by default to the bottom of the screen so even if you make it translucent all the content will be above it you will be unable to achieve what you wish. Instead you can set a bottom for the tab bar to position it below then add some opacity like .75 or .8 to try & get what you want

fieldset set value dynamically sencha touch 2.2

i am new for sencha touch. Please see code at below
view.js
Ext.define("blackbutton.view.Setup.UserProfile", {
requires: [
'Ext.form.*',
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.Spinner',
'Ext.field.Password',
'Ext.field.Email',
'Ext.field.Url',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden',
'Ext.field.Radio',
'Ext.field.Slider',
'Ext.field.Toggle'
],
extend: 'Ext.form.Panel',
xtype: 'SetupUserProfile',
id: 'SetupUserProfile',
config: {
//floating: true,
//centered: true,
cls: 'bb-popupForm',
modal: true,
width: "100%",
layout: 'fit',
height: "100%",
styleHtmlContent: true,
//title: 'Black Button',
//iconCls: 'black',
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Profile',
items: [{
xtype: 'button',
iconMask: true,
iconCls: 'reply',
//text: 'Back',
handler: function () {
//Code here??
}
}]
},
{
xtype: 'panel',
layout: 'vbox',
scrollable: true,
items: [{
xtype: 'fieldset',
id:'SetupUserProfileFS',
title: 'Personal Info',
instructions: 'Please enter the information above',
defaults: {
labelWidth: '35%',
required: true
},
items: [
{
xtype: 'textfield',
id: 'BB_ID',
name: 'BB_ID',
label: 'BB ID',
},
{
xtype: 'emailfield',
id: 'email',
name: 'email',
label: 'Email',
placeHolder: 'me#email.com',
}, {
xtype: 'textfield',
id: 'fullName',
name: 'fullName',
label: 'Full Name',
placeHolder: 'John',
}, {
xtype: 'numberfield',
id: 'mobilePhone',
name: 'mobilePhone',
label: 'Mobile Phone',
placeHolder: '012567890',
},
{
xtype: 'textfield',
id: 'DOB',
name: 'DOB',
label: 'Date of birth',
placeHolder: '30/03/1988',
},
{
xtype: 'textfield',
id: 'mailingAddress',
name: 'mailingAddress',
label: 'Mailing Address',
placeHolder: 'No 11, Jalan taman desa, 54100 KL',
}
]
},
}]
}]
}]
}
});
I need to change fieldset value when I press Reply button. Any example? please give me solution. Thanks
In your Handler you want to dynamically set the values for you fieldset. So the handler for your button would look something like this:
...
items: [
{
xtype: 'button',
iconMask: true,
iconCls: 'reply',
handler: function () {
Ext.getCmp('BB_ID').setValue('New value for BB_ID field');
Ext.getCmp('email').setValue('New value for email field');
Ext.getCmp('fullName').setValue('New value for fullName field');
Ext.getCmp('mobilePhone').setValue('New value for mobilePhone field');
Ext.getCmp('DOB').setValue('New value for DOB field');
Ext.getCmp('mailingAddress').setValue('New value for mailingAddress field');
}
}
]
...

How to group sencha touch 2 radio fields

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

Extjs checkboxfield not rendering in Apache Tomcat

We are using tomcat 6.0.36 and trying to do simple check box example but check boxes are not rendered rest everything working fine
All the text rendered properly, i have created some pages with tabs, forms and grids all pages rendering except checkboxes in them.
Ext.onReady(function() {
Ext.QuickTips.init();
var fsf = Ext.create('Ext.form.Panel', {
url:'save-form.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaults: {
anchor: '100%'
},
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
defaultType: 'textfield',
collapsed: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}],
renderTo: 'build-dynaForm'
})
});
Thanks in advance
Raj
On your form no checkboxes. If you add them, they will be displayed:
{
fieldLabel: 'Checkbox',
xtype: 'checkbox',
name: 'name1'
},{
fieldLabel: 'Checkbox',
xtype: 'checkbox',
name: 'name2'
},{
fieldLabel: 'Checkbox',
xtype: 'checkbox',
name: 'name3'
}
See http://jsfiddle.net/3FBzM/

How to Increase Column Space in EXtJS Column Layout

i have designed an entry form as shown,
i need to have same space between test box and Middle name label.
My code is as follows,
var patientForm = new Ext.FormPanel({
layout: 'column',
columnWidth:1.5,
renderTo: "patientCreation",
frame: true,
autoScroll:true,
title: 'Create Patient',
bodyStyle: 'padding:9px',
width: 900,
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
},{
xtype: 'textfield',
fieldLabel: 'LastName',
name: 'lastName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
allowBlank:false
},
....
....
]
How to leave/increase space between text box and Middle name column?
If you know your number of columns, use column layout. Otherwise do this:
defaults: {
labelStyle: 'padding-left:10px;'
},
items: [...]
Add a defaults config to the container of the columns. All it's children will have the settings you define in defaults (docs). In this example there's just the margin setting (docs) in defaults that will be applied to each item/column.
Ext.create('Ext.panel.Panel', {
title: 'Column Layout - with default margins',
width: 350,
height: 250,
layout:'column',
defaults: {
margin: '0 15 0 0' //top right bottom left (clockwise) margins of each item/column
},
items: [{
title: 'Column 1',
columnWidth: 0.25
},{
title: 'Column 2',
columnWidth: 0.55
},{
title: 'Column 3',
columnWidth: 0.20
}],
renderTo: Ext.getBody()
});
The accepted solution works only with fields as columns. My solution works with any type of column.
PS: the column layout documentation is here.