I have a number field in my form named cashPay and another field name is totalPayable. Now if cashPay is less then totalPayable I need to alert a message and focus on the cashPay field. But I am not being able to do it. focus method works on textfield in other form but on number field it is not working for me. Can anyone please help me on this. Here is my code below :
in my view page >>>
{
xtype: 'numberfield',
name: 'cashPay',
id: 'cashPay',
keyNavEnabled: false,
mouseWheelEnabled: false,
enableKeyEvents: true,
allowBlank: false,
hideTrigger: true,
fieldLabel: 'Cash Pay',
action: 'cashCalculation'
}
in my controller >>>
Ext.Msg.alert("Warning !","Sorry Cash Pay is less than this month's installment. Please pay the right amount")
Ext.getCmp('cashPay').focus(false, 1);
The focus method is defined by and inherited from Ext.component. So, if it works for textfield, it should also work for numberfield. It may be something else. You may try to delay a little bit more using
numberfield.focus(undefined, 20);
Btw: I don't think you should use Ext.getCmp if your numberfield is within a Ext JS form. If you can, use up and down methods to get from your component that is firing the event to your numberfield.
Use 'show' and a callback:
Ext.Msg.show({
title: 'Warning !',
msg: "Sorry Cash Pay is less than this month's installment. Please pay the right amount",
width: 300,
buttons: Ext.Msg.OK,
closable: false,
fn: justAnotherFunc
});
justAnotherFunc: function() {
Ext.getCmp('cashPay').focus(false, 1);
}
Alert is asynchronous, so the field gets the focus and automatically loses it when you close the alert message.
Related
When maximizing/restoring a dialog that contains some form fields with names, like:
Ext.create('Ext.Dialog', {
maximizable: true,
items: {
xtype: 'textfield',
name: 'id',
bind: '{record.id}'
},
buttons: [{
text: 'Save',
bind: {
disabled: '{!record.valid}'
}
}]
}).show();
we're getting an error:
Ext.mixin.Container.attachNameRef(): Duplicate name: "id" on ext-viewport between ext-textfield-1 and ext-textfield-5
Two found workarounds :
Disable animation
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeAnimation: false,
restoreAnimation: false
}
});
Make the proxy used for animation have no items (nor buttons since button disable state may not reflect the bounded value
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeProxy: {
items: null,
buttons: null
}
}
});
Background Information
During maximize and minimize ExtJS creates a shadow clone.
This will create a clone of the window, while you still have the original item.
Using an ID means, there can only be one identical one at any given time.
The clone tries to create the your textfield with the same ID, which does not work.
Typically you want to
for forms you usually do not need to grab each item as you can work with validator and getValues on the form
otherwise you might want to work with references in the view and lookupReference in the controller.
not use animation (because that does not create a clone)
write your own maximize animation and do the animation part yourself (write your own maximize function)
Is there a way to re-render components upon tab switch? I have this data that loads all its store, which contains specific permissions. Each tab must only contain what was provided for their view. See my screenshot below:
Basically, this loads upon initComponent. The dilemma I'm currently having is that the Backoffice tab has a different permission with the Wombat tab. The idea is when either of them contains a permission say an Edit permission (sCreate), only that role is allowed to show the edit buttons as seen. So Backoffice has sEcommCreate while Wombat has sCreate. When either of them satisfies to true, it simply adds/pushes it to the column to be displayed during initComponent.
if (EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)) {
aColumns.push({
header: 'Action',
xtype: 'actioncolumn',
itemId: 'edit-role-btn',
width: 100,
sortable: false,
resizable: false,
draggable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/editpermissions.png',
tooltip: 'Edit Permissions',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'editRow',
cls: 'banks-delete-row'
}
});
}
How do I filter out the display upon switching on the other tab, and also on load? Currently, once sCreate or sEcommCreate passes its condition, it just adds the buttons on both roles since this is one single store.
Already tried reloading the data store from the controller, but it
only loads the data, and not rerender the components to either
add/remove/show/hide them.
To be more clear, I need to hide/remove the Action column if it has no create permissions assigned to it.
The actioncolumn and all actioncolumn items have a function isDisabled. I would recommend to use that function to enable/disabled the item, e.g.
items: [{
icon: 'resources/img/editpermissions.png',
tooltip: 'Edit Permissions',
isDisabled:function() {
var isWombatTab = (this.up('tabpanel').getActiveTab().text == 'Wombat');
if(isWombatTab) return EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)
else return EcommBackoffice.plugin.Security.getAccess(oMe.sEcommCreatePermission)
},
scope: oMe
}],
isDisabled() will be processed during grid refresh, so whenever you reload the store, the changes should come into effect. To force a refresh without changes to the store, you could of course call grid.refresh() from the activate event of the tabs.
It should then possible to hide the disabled item via CSS. I don't know exactly what it will take (may also depend e.g. on the theme you use), but a first guess is
.x-grid-cell-edit-role-btn .x-item-disabled {
visibility:hidden;
}
So I'm trying to create an 'abnormal' combobox using ExtJs 4 and I'm running into a slight issue which I can't figure out how to resolve. I got the basics down with the code that follows. As of right now I am able to get the dropdown to show all the addresses in a proper format and when I click on the proper address it properly shows the 'Street1' value in the input.
Here is what I'm stuck on:
I'm trying to add an initial item to the combobox that basically says something like 'Add New Address' that the user can select. (I'm planning on having this open a modal where the user can input a new address, save it and then have it be displayed back in the combobox, but all of that should be fairly simple) I can't seem to figure out a way of adding just a simple 'Add New Address' and then tracking the value to see if that value is returned to know to make the modal appear or not. I don't want to add it to the store as (I assume) that will add an item in the database and I'd prefer that not happen for the 'Add New Address'.
Any thoughts on how to get that to work? From below you can see that LocationStore is my store and that the general address components apply.
Thank you in advance.
ComboBox Code:
{
xtype: 'combobox',
anchor: '100%',
listConfig: {
emptyText: 'Add New Address - Empty Text',
itemTpl: '<tpl if="Name">{Name}<br /></tpl>'+'<tpl if="Street1">{Street1}<br /></tpl>'+'<tpl if="Street2">{Street2}<br /></tpl>'+'{City}, {StateOrProvince} {PostalCode}'
},
emptyText: 'Add New Location - tester',
fieldLabel: 'Street 1',
name: 'Street1',
allowBlank: false,
blankText: 'Street 1 Required',
displayField: 'Street1',
forceSelection: true,
store: 'LocationStore',
typeAhead: true,
valueField: 'Street1',
valueNotFoundText: 'Add New Location'
},
Thanks to those who pointed me to the right place in the doc, I finally found it!
I managed to achieve what you want by using the tpl, unfortunately I could not find a way to make the keyboard navigation work for the added item. I've looked at the code of Ext.view.BoundListKeyNav, but didn't find any easy solution...
The key was to use tpl instead of itemTpl, and add the markup for the extra item before the for loop:
listConfig: {
tpl: '<div class="my-boundlist-item-menu">Add New Address</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">' + itemTpl + '</div></tpl>'
,listeners: {
el: {
delegate: '.my-boundlist-item-menu'
,click: function() {
alert('Go go go!');
}
}
}
}
The rest of the code in on jsFiddle.
#rixo see the comments on sencha api:
Config: Ext.form.field.ComboBoxView
ADD VALUE:
Maybe we can use Sencha merge object function...
To put 'add new location' value at the store top:
var newLocation = { 'Street' : 'Add New Location' };
var dataMerged = Ext.Object.merge(newLocation,myStore.getRange());
myStore.loadData(dataMerged);
SORT:
add name config param to your combobox
On controller: (2 ways)
'nameComboView combobox[name=combo]' : {
select : this.function1, // <-- when you select a item
change : this.funciton2 // <-- when the item select are changing
}
Now, on function, compare the value to open modal window or not.
I have a grid with a Column configured like...
{
...
editor:new Ext.form.DateField({format:'m/d/Y'}),
renderer: function (val){return val ? Ext.util.Format.date(val, 'm/d/Y') : ''}
...
}
It works fine, except that when I click on a cell to edit it, the cell gets blanked out rather than maintaining its existing value until I choose new one. If after clicking the cell I click away from it, the cell is left empty.
Any idea what would cause this?
Thanks
I would have thought you'd want your column defined like this:
columns: [{
xtype: 'datecolumn',
format: 'm/d/Y',
editor: {
xtype: 'datefield'
}
}]
I don't think you need to use a renderer or use create are you are using it in your example
I've had a similar problem, and solved it somewhat with setting allowBlank: false, as below:
...
editor:new Ext.form.DateField({
format:'m/d/Y',
allowBlank: false
}),
...
This should reset the value back to its original value if you click out of the datefield without selecting a new value.
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes