I have small query,i have two text fields.here my query is if i enter a value in second text field,If the value is greater than first text field it's show pop up message box,
how can i implement this requirement.Any one can u please help to me.
Here is an example:
working fiddle here : https://fiddle.sencha.com/#fiddle/osl
Ext.create('Ext.form.Panel', {
title: 'Check Fields',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Number1',
xtype: 'numberfield',
id: 'num1'
}, {
xtype: 'textfield',
name: 'text2',
fieldLabel: 'Number2',
xtype: 'numberfield',
listeners:{
change: function( me, newValue, oldValue, eOpts ){
if (Ext.getCmp("num1").getValue() > newValue){
Ext.Msg.alert('Status', 'Field 1 greater than Field2');
}
}
}
}],
});
There are many ways to implement that. One possible way would be:
Ext.widget({
xtype: 'container',
defaults: {
xtype: 'textfield'
},
items: [
{
fieldLabel: 'Field 1',
name: 'f1'
},
{
fieldLabel: 'Field 2',
listeners: {
'change': function() {
if (this.getValue() > this.ownerCt.down('textfield[name="f1"]').getValue()) {
Ext.Msg.alert('Attention', 'The value of the second field is greater than the value of the first one');
}
}
}
}
],
renderTo: Ext.getBody()
});
(I'm using jquery for example)
first text field id=A
second text field id=B
var a=$('#A');
var b=$('#B');
$("#B").on(function() {
if(a>b){
alert("B number is greater than A number");
}
});
Related
I want to use onkeyup event of text field, so we can count that character when enter the text.
enableKeyEvents: true
For key events to work, you need to explicitly specify it.
Working POC code:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'form',
height: 100,
items: [{
xtype: 'textfield',
fieldLabel: 'field label',
value: '1',
enableKeyEvents: true,
listeners: {
keyup: function() {
console.log("key Up called");
},
change: function() {
console.log('changed');
}
}
}]
}]
})
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2cbd
You are almost there. In the doc field key events, it is written that key events get fired only if enableKeyEvents is set to true.
{
xtype: 'textfield',
fieldLabel: 'Address',
width: '100%',
enableKeyEvents : true,
listeners: {
keyup : function(obj) {
alert('test fire ' + obj.getValue());
}
}
},
I have a case where I want to get the value from one input (main input field in fiddle) and bind it to other input fields.
https://fiddle.sencha.com/#view/editor&fiddle/2001
Due to fairly complex architecture, these input fields are in different components. I was wondering what would be the best way to bind value from the main input field to all other fields, is there a similar example I could take a look at?
Thx.
As you said, the input fields are from different components, you may not want to create viewModel for all the components.
I have created a listener and got the references of all the corresponding fields you want to set value and setting the value in change event of main input field.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
title: 'Main Input field',
width: 200,
items:[{
xtype: 'textfield',
listeners:{
change:function(cmp, newValue, oldValue, eOpts){
if(newValue){
var inputFields = Ext.ComponentQuery.query('textfield[type=inputField]');
for(var k in inputFields){
inputFields[k].setValue(newValue);
}
}
}
}
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 1',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 2',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
Ext.create('Ext.panel.Panel', {
title: 'Input field 3',
width: 200,
items:[{
xtype: 'textfield',
type:'inputField'
}],
renderTo: Ext.getBody()
});
}
});
I have tested in the shared fiddle, its working fine.
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);
To enable or disable a textfield so that user can have only one textfield enabled to input data.
Explanation :
If their are two textfields : textfield1, textfield2.
If user wishes to enter data in textfield1 then textfield2 should be disabled.
In this scenario :
User inputs the data in textfield1 and wishes that he wants to enter the input for textfield2 instead of textfield1 , then data should be cleared from textfield1 and it should be disabled and textfield2 should be enabled.
Sample Code : I m not aware which event listeners to use to get this functionality.
{
xtype: 'textfield',
width: 215,
fieldLabel: 'Source1',
id: 'textfield1',
listeners: {
}
}, {
xtype: 'textfield',
id: 'textfield2',
width: 215,
fieldLabel: 'Source2',
listeners: {
}
}
Please help me out relove this issue.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
renderTo: Ext.getBody(),
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
id: 'ftf1',
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field1',
value: ''
},{
id: 'ftf2',
xtype: 'textfield',
name: 'textfield2',
fieldLabel: 'Text field2',
value: ''
}]
});
var ftf1 = Ext.getCmp('ftf1');
ftf1.on('change', function(ftf1, newValue, oldValue, eOpts ) {
if (newValue.valueOf()!='') {
Ext.getCmp('ftf2').disable();
} else {
Ext.getCmp('ftf2').enable();
}
})
var ftf2 = Ext.getCmp('ftf2');
ftf2.on('change', function(ftf2, newValue, oldValue, eOpts ) {
if (newValue.valueOf()!='') {
Ext.getCmp('ftf1').disable();
} else {
Ext.getCmp('ftf1').enable();
}
})
});
I need to make an app that shows a form in a window on one screen and the main window with part of the same form - or is this is'n possible another form - on the other screen. Is this possible with ExtJs ? How ? Has anyone seen an example or perhaps an extension that does such ?
You can use a 'card' layout inside your form.
In the following example, the user sees three different pages, the first two pages have fields and the last one a button.
Clicking on the button retrieves the values from the fields. It doesn't matter that the fields are in different containers, as long as these containers are 'descendants' of the form.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
layout:'card',
activeItem: 0,
bbar: [{
text: '« Previous',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var prev = cardlayout.getPrev();
if (prev) {
cardlayout.setActiveItem(prev);
}
}
},{
text: 'Next »',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var next = cardlayout.getNext();
if (next) {
cardlayout.setActiveItem(next);
}
}
}],
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'First name',
name: 'firstName'
}]
},{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'Last name',
name: 'lastName'
}]
},{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Submit',
handler: function(button) {
var formValues = button.up('form').getValues();
alert('Name: ' + formValues.firstName
+ ' ' + formValues.lastName);
}
}]
}]
});
}
});