I have a form with some elements in it. What I want to do is check if there is a specific element in position x. Is there a way so I can get the element x by its index value?
If you want to access the third textfield, you can use Ext.ComponentQuery
var thirdTextField = formcomponent.query('textfield')[2];
or using down
var thirdTextField = formcomponent.down('textfield:nth-child(3)'):
See https://fiddle.sencha.com/#fiddle/i2k
var form = Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {anchor: '100%'},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Middle Name',
name: 'middle',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
renderTo: Ext.getBody()
});
form.down('textfield:nth-child(3)').setValue('Johnson')
}
//0-based index
var element = form.items.getAt(index);
Related
I am beginner to sencha architect and in ExtJS. When I placed error message in below textfield, this textfield moved little up because of vertical-align: middle has been assigned by sencha architect. How to fix that issue.
https://docs.sencha.com/extjs/6.0.2/guides/components/forms.html
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [{
xtype: 'textfield',
flex: 1,
cls: [
'customInput',
'formTextBlack'
],
minHeight: 55,
fieldLabel: 'Pack Type',
labelAlign: 'top',
labelCls: 'blackLabelText14',
labelSeparator: ' ',
msgTarget: 'under',
name: 'packType',
fieldStyle: 'background:transparent',
readOnly: false,
allowBlank: false,
allowOnlyWhitespace: false
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
For this there is two way
Using height and scrollable:'y' or scrollable:true of form component. In this case scroll-able height of form will automatically increase/decrease when error message show/hide respectively. Please refer this working FIDDLE for this way.
Without height and scrollable of form
component. In this case height of form will
automatically increase/decrease when error message show/hide
respectively. Please refer this working
FIDDLE for this way.
I hope this will help you or guide you to achieve your requirement.
Code Snippet with height and scroll-able config
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
height: 350,
scrollable: 'y',//true
width: '100%',
bodyPadding: 10,
defaults: {
flex: 1,
anchor: '100%',
labelSeparator: '',
margin: '10 20',
minHeight: 55,
xtype: 'textfield',
labelAlign: 'top',
allowBlank: false,
msgTarget: 'under' // location of the error message
},
items: [{
fieldLabel: 'Last Login Time',
name: 'loginTime',
regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
maskRe: /[\d\s:amp]/i,
invalidText: 'Not a valid time. Must be in the format "12:34 PM".'
}, {
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Middle Name',
allowBlank: true,
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
fieldLabel: 'Email',
name: 'email'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Join',
name: 'joinDate',
invalidText: '"{0}" not valid.enter value should be like "{1}" .' // custom error message text
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate',
invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}]
});
Code Snippet without height and without scroll-able config
Ext.create('Ext.form.Panel', {
renderTo: document.body,
title: 'User Form',
width: '100%',
bodyPadding: 10,
defaults: {
flex: 1,
anchor: '100%',
labelSeparator: '',
margin: '10 20',
minHeight: 55,
xtype: 'textfield',
labelAlign: 'top',
allowBlank: false,
msgTarget: 'under' // location of the error message
},
items: [{
fieldLabel: 'Last Login Time',
name: 'loginTime',
regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
maskRe: /[\d\s:amp]/i,
invalidText: 'Not a valid time. Must be in the format "12:34 PM".'
}, {
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Middle Name',
allowBlank: true,
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
fieldLabel: 'Email',
name: 'email'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Join',
name: 'joinDate',
invalidText: '"{0}" not valid.enter value should be like "{1}" .' // custom error message text
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate',
invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}]
});
php return data from server side but not extjs not render the value of fields
i'm using xtype: 'checkbox'
{"total":1,"success":true,"locks":[{"id":"1","record_id":"11","is_unreachable":"1","is_directory_Lock":"1","is_Internet_Lock":"0","is_partner_Lock":"1","is_home_business":"1","is_top_listing":"1","is_mole":"1","is_pre_call":"1","is_new_business":"1","is_free_adv":"1","is_verified":"1","is_reviewed":"1","is_idr":"1"}]}
json array return from server
you have to paste you code.
But why not go to the example:
http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html
Ext.define('UserApp.view.uiTypes.LockFeature',{
extend: 'Ext.form.Panel',
collapsible: true,
flex: 1,
height: 200,
width: 600,
store: null,
itemId: 'lockfeature',
layout:{
type: 'table',
columns: 3
},
items:[{
xtype: 'checkbox',
boxLabel: 'Is Unreachable',
name: 'is_unreachable',
id: 'is_unreachable',
dataIndex: 'is_unreachable',
inputValue: 'true',
uncheckedValue: 'false',
value: true,
},{
xtype: 'textfield',
name: 'is_unreachable_update',
fieldLabel: 'Last Update',
},{
xtype: 'textfield',
name: 'update_by_user',
fieldLabel: 'By'
}],
initComponent: function(){
console.log(this.table);
console.log(this.record_id);
var table = this.table;
var parentTable = table.split('_');
console.log(parentTable[0]);
var store = Ext.create('UserApp.store.LockFeature');
store.getProxy().setExtraParam('table',parentTable[1]);
store.getProxy().setExtraParam('tab',parentTable[1]);
store.getProxy().setExtraParam('saving_table', table);
store.getProxy().setExtraParam('record_id',this.record_id);
this.store = store;
this.callParent(arguments);
store.load();
}
});
I am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.
Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...
here Is my some code :
Ext.define('Am.user.Registration', {
extend:'Ext.form.Panel',
//extend:'Ext.window.Window',
id:'registationId',
alias:'widget.Registration',
title:'Registration form',
resizable:false,
buttonAlign:'center',
closable:true,
titleAlign:'center',
//autoScroll:true,
draggable:false,
//shadow:true,
height:350,
width:800,
floating:true,
bodyPadding: 30,
//collapsible:true,
requires:[
'Balaee.view.sn.user.Captcha'
],
defaults:{
//align:'center'
defaultAlign:'t1-c'
},
//bodyStyle: 'align:center',
// Ext.require(['Ext.form.field.Date']);
items:[
{
xtype:'combo',
fieldLabel:'Language',
name:'language',
emptyText: 'Language',
store: ['Marathi','Hindi','English'],
queryMode: 'local',
editable:false
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [
{xtype: 'textfield', fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80, allowBlank: false,margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
validator: function(value) {
var password1 = this.previousSibling('[name=firstName]');
return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
}
}
]
},
{
xtype:'textfield',
fieldLabel:'Primary email',
name:'primaryEmail',
//anchor:'100%',
allowBlank:false,
emptyText: 'Email',
vtype:'email'
//labelAlign:'right',
},
---------------
--------------
],//End of items square
// buttons:[{
// xtype:'button',
// formBind: true,
// fieldLabel:'submitttttttt',
// action:'submitAction',
// text:'Submit',
// defaultAlign:'t1-c'
// }
// ],
bbar:
[
{
xtype:'button',
formBind: true,
fieldLabel:'submit',
action:'submitAction',
text:'Submit',
defaultAlign:'t1-c'
//flex:6,
},
],//End of buttons square
});// End of login class
You should apply an HBox layout (with pack: 'center') to your form and ditto for your toolbar.
You can see an example of how this is done for the form here. And for the toolbar:
var toolbar = new Ext.Toolbar({
dock: 'bottom',
layout:{
pack: 'center'
},
items: [{
xtype: 'button',
text: 'foobar',
handler: function(){
alert('ok');
}
}]
});
This is my textfield
siteNameField = new Ext.form.TextField({
id: 'siteNameField',
fieldLabel: 'Site Name',
maxLength: 50,
allowBlank: false,
anchor:'-15',
xtype:'textfield',
maskRe: /([a-zA-Z0-9\s]+)$/
});
As you can see it already has a check for blanks. But text field accepts space and I don't want that. I want no blank fields ... anything other than 'ONLY' spaces is acceptable .
Here is the FormPanel Code
voiceSiteCreateForm = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:0.5,
layout: 'form',
border:false,
//items: [siteNameField, siteNumberField,queueNameField,notifyFreqField,notifyStatusField]
items: [siteNameField, siteNumberField]
}]
}],
buttons: [{
text: 'Save and Close',
handler: createSite
},{
text: 'Cancel',
handler: function(){
// because of the global vars, we can only instantiate one window... so let's just hide it.
siteCreateWindow.hide();
}
}]
});
Please help,
Remove maskRe and use regex. Eg:
siteNameField = new Ext.form.TextField({
id: 'siteNameField',
fieldLabel: 'Site Name',
maxLength: 50,
allowBlank: false,
anchor:'-15',
xtype:'textfield',
regex: /[a-zA-Z0-9]+/
});
Hi everybody
I'm a beggining with extjs and I have issue with change / set a item to a layout when i click on one of my node .
Here my contentPanel :
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: layoutExamples // HERE I WANT TO CHANGE DYNAMIC
};
My "listener" on my treenode :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
//Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel'); <== It's work.
Ext.getCmp('content-panel').setActive(formPanel); // HERE I TRY TO CHANGE ITEM ON CLICK AND SET FORMPANEL
});
My item for test :
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
} }]
});
So, my objective is to change item of my content panel when i click on a node.. !
Thanks a lot for your helps buddies !
try that and tell me in the comments:
var formPanel = Ext.create('Ext.form.Panel',
{
'id': 'form-panel-1', // or what you want to give
// and all the properties you already defined
}
);
And in your event, based on http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card-method-setActiveItem :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').getLayout().setActiveItem(Ext.getCmp('form-panel-1'));
}
});
By the way, in the code you provided, there is an error in the listener, it misses a } for closing the if!