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/
Related
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'
}
]
});
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');
}
}
]
...
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.
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
I have a nestedList - when I get to the final item, I would like to call a handler that swaps the panel to a carousel. Please see - http://test.miaduk.com/mobile/TLE/
Unfortunately I can't seem to get any handlers to work on the nested Items and can not think of another way. I'm still very much a beginner in Sencha, so any help would be appreciated.
Thank you!
See code:
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: true,
onReady: function() {
/*Data Store
*********************************************************************************/
var data = {
text: 'Categories',
items: [{
text: 'Core Skills/Personal Development',
items: [{
text: 'Fishbone Diagram',
leaf: true
},{
text: '5 Whys Technique',
leaf: true
},{
text: 'SMART Objectives',
leaf: true
},{
text: 'Circle of Influence',
leaf: true
},{
text: 'Managing Stress',
leaf: true
}]
},{
text: 'Communication',
items: [{
text: 'Listening Skills',
leaf: true
},{
text: 'Giving Feedback',
leaf: true
},{
text: 'Recieving Feedback',
leaf: true
}]
},{
text: 'Customer Service',
items: [{
text: 'Listening and Confirming',
leaf: true
}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Categories',
displayField: 'text',
dock: 'top',
store: store
});
/*Carousel
*********************************************************************************/
var carousel = new Ext.Carousel({
fullscreen: true,
displayField: 'text',
dock: 'top',
defaults: {
cls: 'card'
},
items: [{
html: '<img src="drainImage1.png">'
},
{
title: 'Tab 2',
html: '<img src="drainImage2.png">'
}]
});
/*Tab Panel
*********************************************************************************/
var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'My Courses',
html: '<h1>Course list to appear here</h1>',
iconCls: 'favorites',
cls: 'card2',
badgeText: '3',
dockedItems: nestedList
},{
title: 'Sample',
cls: 'card2',
iconCls: 'user',
dockedItems: carousel
},{
title: 'Help',
html: '<h1>Help</h1><p>Info on how to add to your home screen goes here</p>',
cls: 'card3',
iconCls: 'user'
}]
});
Check this sample from Sencha NestedList
http://dev.sencha.com/deploy/touch/examples/nestedlist/index.js
There is a "leafitemtap" event that you can hook to your nested list to execute a callback:
nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
var ds = subList.getStore(),
r = ds.getAt(subIdx);
Ext.Ajax.request({
url: '../../src/' + r.get('id'),
success: function(response) {
detailCard.setValue(response.responseText);
},
failure: function() {
detailCard.setValue("Loading failed.");
}
});
});