I am new to ExtJs,i have designed an entry form as follows,
var HouseForm = new Ext.FormPanel({
renderTo: "HouseCreation",
frame: true,
url: url+'/lochweb/loch/house/persist',
title: 'Create House',
bodyStyle: 'padding:5px',
width: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'TaxId',
name: 'taxId',
allowBlank:true
}
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [HouseForm]
});
win.show();
});
I need to validate the user inputs manually,so i need to call my function to validate the user inputs.how to define and call a function and also is there any other layout other than fit?
Thanks
You can simply write your functions/methods in same .js file and call them as usual i.e. () . It will work.
About layouts, there many varieties of layouts available in ExtJS. Here is the link which shows example and minimal code of all the layouts possible in ExtJS.
Related
I have created a form with two columns. In my viewcontroller I would like to access the form values.
Unfortunately I only managed to access the left column. How do I access the values of the right column
Ext.define('ocm.view.ocmMask.ModalOverviewOperationsEdit', {
extend: 'Ext.window.Window',
xtype: 'modaloperationedit',
title: 'Einsatz bearbeiten',
frame: true,
resizable: true,
width: 700,
minWidth: 700,
minHeight: 300,
bodyPadding: 0,
layout: 'column',
controller: 'overviewoperations',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
style: 'width: 50%'
},
items: [{
//I get the Values of this column
xtype: 'form',
items: [
{
xtype: 'datefield',
fieldLabel: BpcCommon.lang.Current.OCM_MASK_DATE,
maxValue: new Date(),
bind: "{operation.ALARMIERUNGSDATUM}",
name: 'ALARMIERUNGSDATUM',
required: true
}]
}, {
//I didn't get this values
items: [
{
xtype: 'combobox',
store: "ocmKeywordStore",
valueField:'ID',
name: "ALLOCATION",
id: "ALLOCATION",
fieldLabel: BpcCommon.lang.Current.OCM_MASK_ALLOCATION,
displayField:'Text',
queryParam: false,
editable: false,
}]
}],
In the view controller I access it as follows
Ext.define('ocm.view.ocmMask.OverviewOperationsController', {
extend: 'Ext.app.ViewController',
alias: 'controller.overviewoperations',
updateOperation: function(btn){
var win = btn.up('window'),
getForm = win.down('form');
var values = getForm.getValues();
console.log(values);
}
});
The main problem is that your second field is not inside your form.
Right now you have an Ext.window.Window with the layout column that contains a form with a datefield and a container that contains a Combobox.
So your getValues(https://docs.sencha.com/extjs/6.0.1/classic/Ext.form.Panel.html#method-getValues) method does the right thing and gives you all values from fields that are contained or inside your form.
I just did a small fiddle. Maybe you more looking for an approach like this?
https://fiddle.sencha.com/#view/editor&fiddle/36kq
I am very new to this ExtJS, Here is my POC,
Ext.onReady(function(){
var my3rdNumberField = new Ext.form.NumberField({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
width: 25,
value:1,
maxValue:20,
minValue:1
});
my3rdNumberField.render(Ext.getBody());
});
i gave the field label as Number of Copies, but it is not showing before the textbox or anywhere else. can you please help me where i have mistaken or is there anything i need to add along with the listed. if so why fieldLabel is not working?
change Ext.form.NumberField to Ext.form.field.Number.
var my3rdNumberField = new Ext.form.field.Number({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
Labelwidth: 50,
value:1,
maxValue:20,
minValue:1
});
my3rdNumberField.render(Ext.getBody());
here is working code in extjs 3.4 . please confirm the version of extjs.If you are using extjs 4 or above see the example :
http://jsfiddle.net/hWGYE/2358/
Ext.onReady(function(){
var myPanel = new Ext.form.FormPanel({
labelWidth: 120,
items:[new Ext.form.NumberField({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
width: 100,
value:1,
maxValue:20,
minValue:1
})],
});
myPanel.render(Ext.getBody());
});
I want to popup a window to interact with people who want to upload a file to server. I want to render a file input form in the new window, but I can't make it run by doing follows:
var win = new Ext.Window();
var fp = new Ext.FormPanel({
renderTo: win,//I just guess that I can render this to the window I created...
fileUpload: true,
width: 500,
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'photo-path',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'file-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o){
msg('Success', 'Processed file "'+o.result.file+'" on the server');
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
win.show();
As per the Ext JS documentation about the renderTo() method:
"Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items."
So what you need to do is:
Create the formPanel without the renderTo option
Create your window and specify the formPanel as an item of the window.
var win = new Ext.Window({
//You can specify other properties like height, width etc here as well
items: [fp]
});
You can refer to a working fiddle on this link:
http://jsfiddle.net/prashant_11235/2tgAQ/
I want to display the label on top of text field, but it is not displaying. Below is the code.(in fact the below code displays the label at the right side of text field).I am using extjs 3.4, note : Using form panel is also not working as expected (have pasted the code below)
Any help is much appreciated.
Ext.onReady(function () {
var contentsPanel = new Ext.Panel({
labelAlign: 'top',
renderTo: Ext.getBody(),
layout: 'form',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first'
}]
});
contentsPanel.show();
});
Ext.onReady(function () {
var contentsPanel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
defaultType: 'textfield',
labelAlign: 'top',
items: [{
fieldLabel: 'First Name',
name: 'first',
labelAlign: 'top'
}]
});
contentsPanel.show();
});
labelAlign is a property of field, not panel property. Need to configure field:
items:[{
fieldLabel: 'FirstName',
labelAlign: 'top',
name: 'first'
}]
If you want set labelAlign for all panel fields, you can add in panel config:
var contentsPanel = new Ext.Panel({
fieldDefaults: {
labelAlign: 'top'
},
...
When I reference a combobox using this.stateComboBox it fails. However, using the same syntax, it works fine for a text field.
Giving the combobox an 'id', I can reference it using Ext.getCmp('stateComboBox'). But, I know that is BAD practice.
Can someone please tell me what I am doing wrong? See notes at end.
Thanks
Ext.define('App.view.prospects.Show', {
alias: 'widget.prospectsshow',
extend: 'Ext.form.Panel',
iconCls: 'icon-prospects',
itemId: 'prospectsshow',
constructor: function(config) {
var cfg = config || {};
this.phoneNumberTextField = Ext.create('Ext.form.field.Text', {
anchor: '100%',
allowBlank: true,
fieldLabel: 'Phone Number',
labelAlign: 'top',
margin: '5 5 5 0',
tabIndex: 1
});
this.stateComboBox = Ext.create('Ext.form.field.ComboBox', {
anchor: '100%',
displayField: 'name',
editable: false,
fieldLabel: 'State',
forceSelection: true,
id: 'stateComboBox', // I hate using this. See note below.
labelAlign: 'top',
margin: '5 5 5 5',
mode: 'local',
store: this.stateStore,
tabIndex: 22,
triggerAction: 'all',
valueField: 'id',
valueNotFoundText: ''
});
// Lots of objects removed for clarity....
Ext.applyIf(cfg, {
border: false,
items: Ext.create('Ext.form.Panel', {
bodyStyle: 'background-color: #F1F1F1;',
items: this.prospectPanel // Not shown above, but contains this.phoneNumberTextField and this.stateComboBox
}),
frame: false,
layout: 'fit'
});
this.superclass.constructor.call(this, cfg);
},
setData: function(record) {
// This works fine.
this.phoneNumberTextField.setValue(record.phone_number);
// This fails. No error in console. Just does nothing. WHY?
//this.stateComboBox.setValue(record.state_id);
// This works. But, I hate using 'id'. It is BAD practice.
Ext.getCmp('stateComboBox').setValue(record.state_id);
}
});
You should use itemId instead of id. Get the object by calling:
this.getComponent('internalid');
To solve the issue I suspect that you're only creating the reference to early. You need to be careful what you do so you don't end up adding the object to the prototype rather than the inherited object.
Add all your things in initComponent rather than constructor.
initComponent: function ()
{
// you can add things to config here
var config = {
anchor: '100% 100%',
...
};
// create your local var things here (don't forget to add it somewhere)
this.combo = Ext.create('...');
// apply new config to base config
Ext.apply(this, config);
// ExtJS does all the stuff with the config
this.callParent();
// from here you should be able to getComponent
// not always true though depending on rendering
}