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'
},
Related
I am currently working on ExtJs and I am stuck at a place where I want to iterate through all components and find the parent tab of each component.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
items : [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
},
{
xtype: 'button',
text: 'Reset',
}]
},
{
title: 'Tab 2',
html : 'Another one',
items: [{
xtype: 'button',
text: 'Test',
}]
}
],
renderTo : Ext.getBody()
});
}
});
In above code, when I iterate through all components and log name of the parent tab whether it is Tab 1 or Tab 2
Whenever you are iterating through all the components, just do
field.up().up()
where field is the component of your tab and above statement will return you the parent tabpanel and so with
field.up().up().title
will return you "Tab 1"
In the same way for tab 2 components it will be
field.up() only.
If you have only one loop or something to go through all components then you can put a condition that
if(field.up()) returns you the panel then read it\'s title
else do field.up().up() and then read the title.
I hope this solves you issue.
You can use , field.up('tabPanel') to get the reference of the tabPanel, and then from the reference you can get name,title for the tabPanel
I have a fieldset defined on my page. Now I want to enable or disable this field set on button click event. But it is not working properly. Below is the code I have written:
To Disable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.disable();
});
To Enable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.enable();
});
Issue-1 : When I disable fieldset, it seems to be disabled visually. But still I can access controls inside it.
Issue-2 : Once it is disabled, I cannot re-enable it.
I need a working sample with these two issues resolved.
Currently I am using version 4.2 of ExtJs
You should call the setDisabled function on the fieldset. It will disable all containing components.
fieldset.setDisabled(true);
// the fieldset and all inner components are disabled
fieldset.setDisabled(false);
// the fieldset and all inner components are enabled
See the Sencha ExtJs 4.2.0 documentation and
the following minimal working example can be found on Sencha Fiddle.
Ext.create('Ext.panel.Panel',{
items: [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
}, {
xtype: 'button',
text: 'Disable fieldset',
handler: function (button) {
var fieldset = Ext.ComponentQuery.query('panel > #fieldsetId')[0];
var toggle = !fieldset.isDisabled();
var text = (toggle ? 'Enable' : 'Disable') + ' fieldset';
fieldset.setDisabled(toggle);
button.setText(text);
}
}],
renderTo: Ext.getBody()
});
Paste this into a Sencha fiddle and hit Run:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('Ext.window.Window', {
height: '100%',
width: '100%',
autoShow:true,
bodyPadding: 25,
title:'win',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'checkbox',
fieldLabel: 'field1'
},{
xtype: 'checkbox',
fieldLabel: 'field2'
},{
fieldLabel: 'field3',
xtype: 'combo',
store: ['asdf','zzasdf','dfdf']
}]
}, {
xtype: 'button',
text: 'Enable/Disable entire fieldset',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.setDisabled(!fset.disabled);
}
}, {
margin: '0 0 0 10',
xtype: 'button',
text: 'Enable/Disable each field in fieldset individually',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.items.each(function(i){
i.setDisabled(!i.disabled);
});
}
}]
});
}
});
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.
I have two views and I want one to be nested inside the other, like a partial view. My two views are as follows:
ChemicalRisksView.js
Ext.define('HandSurvey.view.ChemicalRisksView', {
extend: 'Ext.form.Panel',
xtype: 'chemicalrisksview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.Button',
'HandSurvey.view.SpecificChemicalView'
],
config: {
items:[{
xtype: 'fieldset',
title: 'Fiberglass & Resins',
items: [
{
name: 'test',
xtype: 'specificchemicalview'
},
{
xtype: 'button',
text: 'Save',
action: 'saveChemicalRisks',
margin: '10 5',
ui: 'confirm'
}
]
}]
}
});
SpecificChemicalView.js
Ext.define('HandSurvey.view.SpecificChemicalView', {
extend: 'Ext.form.Panel',
xtype: 'specificchemicalview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Toggle',
'Ext.field.Select',
'Ext.field.Text',
'Ext.Button'
],
config: {
items:[{
xtype: 'fieldset',
title: 'Edit Specific Chemical',
items: [
{
name: 'name',
xtype: 'textfield',
label: 'Name'
},
{
name: 'model',
xtype: 'textfield',
label: 'Model #'
},
{
name: 'manufacturer',
xtype: 'textfield',
label: 'Manufacturer'
},
{
name: 'averageExposure',
xtype: 'textfield',
label: 'Average Exposure Time'
},
{
name: 'msdsOnFile',
xtype: 'checkboxfield',
label: 'MSDS On File'
},
{
name: 'additionalInfo',
xtype: 'textfield',
label: 'Additional Info'
},
{
xtype: 'button',
text: 'Save Chemical',
action: 'saveChemical',
margin: '10 5',
ui: 'confirm'
}
]
}]
}
});
So I have defined the xtype as specificchemicalview and added it to the items in the 'parent' view. But, nothing happens. It just shows nothing in the ChemicalRisksView. I am debugging in Chrome and there are no error messages.
I am using this same method to add all my views to my main navigation view and that works fine. What am I missing here?
In HTML, form cannot contain another form. Although it could work in Ext as it does not use <form> tag, I do not think it is a good idea. Form is designed to contain form fields (isFormField:true) that another form is definitely not one.
I would consider a re-design where the "specific view" would extend FieldSet adding necessary form fields as its items.
That should solve the problem.
I have my ExtJS 4.2.1 MVC Application.
Inside my app, I have a grid with a toolbar. The toolbar has 2 buttons, "Add New" and "Edit Record".
Inside my Controller.js I listen for my toolbar buttons click events.
this.control({
'toolbar #newRecord': {
click: this.addRecord
},
'toolbar #editRecord': {
click: this.editRecord
},
'[xtype=editshiftcode] button[action=commit]': {
click: this.saveRecord // here I have to add or edit
}
}
Then I have Window that I want to use for editing and adding records:
Ext.define('App.view.EditShiftCode', {
extend: 'Ext.window.Window',
alias: 'widget.editshiftcode',
height: 250,
width: 550,
title: 'Add / Edit Shift',
modal: true,
resizable: false,
layout: 'fit',
glyph: Glyphs.PENCIL,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
//height: 175,
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: { // defaults are applied to items, not the container
allowBlank: false,
allowOnlyWhitespace: false,
msgTarget: 'side',
xtype: 'textfield'
},
items: [
{
xtype: 'textfield',
name: 'ShiftCode',
fieldLabel: 'Code'
},
{
xtype: 'textfield',
name: 'Description',
fieldLabel: 'Description'
},
{
xtype: 'hiddenfield',
name: 'ShiftType'
},
{
xtype: 'hiddenfield',
name: 'ShiftTypeId'
},
{
xtype: 'textfield',
name: 'Hours',
fieldLabel: 'Hours per Day'
},
{
xtype: 'colorcombo',
name: 'ColorHex',
fieldLabel: 'Color'
},
{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'IsActive',
}
],
}]
}],
buttons: [
{
text: 'OK',
action: 'commit',
glyph: Glyphs.SAVE
},
{
text: 'Cancel',
action: 'reject',
glyph: Glyphs.CANCEL
}]
});
me.callParent(arguments);
},
});
My editRecord function is:
editRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My addRecord function is:
addRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My saveRecord function is:
saveRecord: function (button, e, options) {
// here i need to know what operation im going to perform.
// if Im going to edit then I have to update my form record to my store record
// if im going to add then I need to add a new item to my store.
}
Is this correct? To use the same function to perform 2 different actions? And if so, how can I know what action am I going to perform and how to do it?
Thanks
This way always worked for me:
User selects a record in the grid
User clicks "Edit record"
I use loadRecord to load the selected record in the form
When he clicks OK I call updateRecord
If user clicks "Add record" I create a new blank record and go to step 3
If he clicks OK after adding record, I just add the new record to the grid - you can easily know if the record is new or existing by checking phantom flag. So if record.phantom === true then it is new.