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]+/
});
Related
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);
I have a panel holding a form. The form has fieldsets enclosing it. However, the fieldset is displaying as the same size of the panel holding the form even when the form contents are much smaller than the panel. I won't the fieldset to not stretch to the containing panel. I only want fieldset to be only as big as the form it is enclosing. However the fieldset takes the whole width of it's containing panel.
--Container for FormPanel
var win = new Ext.FormPanel({
xtype: 'form',
layout: 'form',
height: 200,
width: 300,
title: 'Testing',
items: [{
xtype: 'fieldset',
layout: 'hbox',
autoHeight:true,
autoWidth: false,
title: 'Fieldset',
defaults: {
border: false,
layout: 'form',
labelAlign: 'top',
labelSeparator: ''
},
items: [{
items: new Ext.form.TextField({
fieldLabel: 'Col1',
name: 'col1',
value: 'nothing',
})
}, {
items: new Ext.form.TextField({
fieldLabel: 'Col2',
name: 'col2',
value: 'something'
})
}]
},
new Ext.form.TextField({
fieldLabel: 'Col3',
name: 'col3',
value: 'anything'
})
]
}).show();
I have a panel like http://jsfiddle.net/7kKVc/
I try to move displayfield like below
I try hideLabel: true, but that's wrong :(
How to make that thanks
Try this:
var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5, // Don't want content to crunch against the borders
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date'
}, {
hideEmptyLabel: false,
xtype: 'displayfield',
value: 'Limit: my value'
}],
renderTo: Ext.getBody()
});
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');
}
}]
});
I have an extjs2 formpanel:
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
id: 'formPanel',
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 550,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
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,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save',
handler: function(){
var form = Ext.getCmp('formPanel').getForm();
if(form.isValid())
form.submit({
waitMsg:'Loading...',
url: 'RepeatSession.jsp',
success: function(form,action) {
//we have to close the window here!!
},
failure: function(form,action){
Ext.MessageBox.alert('Erro',action.result.data.msg);
}
});
}
},{
text: 'Cancel'
}]
});
and a window:
win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 300,
modal: true,
closeAction: 'hide',
items: fsf
});
win.show();
As you can see, the form panel is inside the window as an item. I have to close the window after a successful form submission but I have no idea how to access the window object inside my success handler.
How can i hide the window after successful form submission?
Just save a reference to the window or one of its children before creating the form. For example you can use the button paremeter that the handler function gets passed:
handler: function(button, e){
[...]
success: function(form,action) {
button.up('.window').close();
},
Or, as you apparently already have the window in a variable (win), you can just use that to close the window:
win.close();
but that depends on the variable win being available inside the success function, which we cannot assume from the code you gave.