I am reading the extjs offical tutorial to create a login form, so I create following login form window:
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel',
'Ext.form.field.Display',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
});
here is the screenshot:
Please notice the "Login" button, it was wrapped by a gray background, but it was padding 10px white space with window.
How can bodyPadding do not padding the bottom button withou white space with the parent window? Just Like following picture:
I am using extjs6
Move the bodyPadding from the window down to the form. The body doesn't include docked items.
Fiddle.
Related
I have a problem with ExtJS modern toolkit's Form component.
I create a form with no buttons (you can test it in sencha fiddle). The only button is in the titlebar and it isn't working at the moment.
The problem is :
Form submission on pressing Enter. My form is empty, default method is POST, but my page is reloading when I press Enter while the focus is on any of my fields. Url address string in browser complemented form field names, but the form's method is POST.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.TextArea',
'Ext.TitleBar'
],
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Searching',
items: [{
iconCls: 'fa fa-search',
iconAlign: 'right',
text: 'Search',
align: 'right',
handler: function() {
//
}
}]
}, {
xtype: 'fieldset',
border: false,
shadow: 'true',
defaults: {
value: ''
},
items: [{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'id'
},
{
xtype: 'textfield',
label: 'Some Article',
name: 'article'
}
]
}]
});
How to prevent page reloading?
I've never seen this behaviour in ExtJS form's by default.
Just replace id with something else could be Id in field name, it is conflicting with Ext id property
{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'Id'
},
I have a form panel created in EXtjs 4.1 in which there are 7 fieldsets. Default fieldset type is text field. Some of them are search box text fields. Form Panel has height specified. So if I scroll down to bottom of form panel and make change in fieldset (like searching for word and selecting one of the options form results), Scrollbar jumps a bit to top. This happens in update layout, Is there any way to prevent this?
My form panel code is as below.
Ext.define('MyApp.view.Form', {
extend: 'Ext.form.FormPanel',
overflowY: 'auto',
defaults: {
anchor: '98%',
msgTarget: 'side',
disabledCls: ''
},
disabledCls: '',
bodyBorder: false,
bodyPadding: '0 8 10 8',
border: '0',
waitMsgTarget: true,
frame: false,
fieldDefaults: {
labelAlign: 'top',
bodyPadding: 0,
labelSeparator: '',
msgTarget: 'side',
disabledCls: ''
},
defaultType: 'textfield',
items:[
{ xtype: 'item 1' },
{
xtype: 'item2'
},
{ xtype: 'item3'},
{ xtype: 'item4' },
{
xtype: 'item5'
},
{ xtype: 'item6' },
{ xtype: 'item7' }
]
});
This is happening for all fieldset changes.
I have following code-
{ fieldLabel: 'Date', name: 'Date', xtype: 'datefield' }
{ fieldLabel: 'Name', name: 'PerName', xtype: 'textfield' },
{
xtype: 'panel',
layout: 'form',
border: false,
labelWidth: 200,
items: [
this.fields.check1 = { xtype: 'checkbox', name: 'Check1', fieldLabel: 'Checkbox 1', width: 320 },
this.fields.check2 = { xtype: 'checkbox', name: 'Check2', fieldLabel: 'Checkbox 2', width: 320 }
]
}
Here, I am taking the checkboxes inside a panel as I need to increase the label width.
The label is showing but checkbox is not displaying .
What I am doing wrong
How about you add your checkboxes inside a FormPanel something like this:
var myPanel = new Ext.form.Panel({
alias: 'widget.myformPanel',
renderTo: Ext.getBody(),
defaults: {
labelWidth: 100,
},
items: [{
xtype: 'checkbox',
name: 'Check1',
fieldLabel: 'Checkbox 1'
}, {
xtype: 'checkbox',
name: 'Check2',
fieldLabel: 'Checkbox 2'
}]
});
In that way, you can set the labelWidth of the formPanel items.
Try to play it with jsfiddle.
Build your application with
sencha app build
It seems that you need to build only for deployment, however, development version uses production css. Therefore, anytime you add a new class you need to build the app to re-create css to include the new class styling.
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.