I want to call button click in textfield enter function.
items: [
{
xtype: 'form',
id: 'myForm',
items: [
{
xtype: 'textfield',
id: 'myTextField',
listeners: {
specialkey: function(f,e){
if(e.getKey() == e.ENTER){
console.log('Spacial Key = Enter'); // It's working
// But i wanna click btnSearch button click event
}
}
}
}
],
buttons: [
{
text: 'Search',
id: 'btnSearch',
handlers: function(){
// bla bla
// bla bla
// ...
}
}
]
}
]
var myform = Ext.getCmp('myForm');
myForm.getForm().submit()
It's working but btnSubmit.click function not working
this code working :
{
fieldLabel : 'Password',
name : 'j_password',
inputType : 'password',
allowBlank : false,
listeners : {
'render' : function(cmp) {
cmp.getEl().on('keypress', function(e) {
if (e.getKey() == e.ENTER) {
submitform();
}
});
}
}
}
It will be easier to create a method like doSearch() and call this method from both handlers.
Depending on you scope you can try this:
Ext.getCmp("btnSearch").handler.call(Ext.getCmp("btnSearch").scope);
Ext.getCmp('btnSearch').focus();
I Dont Think It But Its Working For Me :)
Thanks For All
Related
Is there a solution to extend the KeyMap of the ItemSelector?
I would like to add a keymap(like pageUp and pageDown keyEvent in itemselector) that when I press the letter 'A-Z' will take me to the item that starts with the letter pressed and select it.
You can use the following override (fiddle sample) to achieve it. It will not work correctly on view sore reload. And you will have to define the record search record field. In case of complicated view templates you can remove hardcoded search function and use it as a setting.
Ext.define('overrides.view.NavigationModel', {
override: 'Ext.view.NavigationModel',
searchRecordField: false,
initKeyNav: function (view) {
var me = this;
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.
// By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys
// which by default affect scrolling.
var keyNavConfig = {
target: view,
ignoreInputFields: true,
eventName: 'itemkeydown',
defaultEventAction: 'stopEvent',
processEvent: me.processViewEvent,
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
pageDown: me.onKeyPageDown,
pageUp: me.onKeyPageUp,
home: me.onKeyHome,
end: me.onKeyEnd,
space: me.onKeySpace,
enter: me.onKeyEnter,
A: {
ctrl: true,
// Need a separate function because we don't want the key
// events passed on to selectAll (causes event suppression).
handler: me.onSelectAllKeyPress
},
F: me.onAlphabetKeyPress,
scope: me
};
if(this.view.searchRecordField) {
keyNavConfig = Ext.Object.merge(keyNavConfig, this.getAdditionalKeyNav());
}
me.keyNav = new Ext.util.KeyNav(keyNavConfig);
},
getAdditionalKeyNav: function() {
var keyNav = {};
this.view.getStore().each(function(record) {
var firstLetter = record.get(this.view.searchRecordField)[0].toUpperCase();
if(!keyNav[firstLetter]) {
keyNav[firstLetter] = this.onAlphabetKeyPress
}
}, this);
return keyNav;
},
onAlphabetKeyPress: function(keyEvent) {
const key = keyEvent.event.key;
var foundRecordIndex = this.view.getStore().findBy(function(record) {
return record.get('title').toLowerCase().indexOf(key) === 0;
}, this);
if(foundRecordIndex > -1) {
this.setPosition(foundRecordIndex, keyEvent);
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ListItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'ListItemsStore',
model: 'ListItem',
data: [{
title: "One"
}, {
title: "Two"
}, {
title: "Three"
}, {
title: "Four"
}, {
title: "Three"
}, ]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<span>{title}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('ListItemsStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
// Search Record Field
searchRecordField: 'title',
renderTo: Ext.getBody()
});
}
});
I'm developing a web application using Extjs-6. I want to extend a class from Ext.form.field.Picker. I do it as follow:
...
extend: 'Ext.form.field.Picker',
createPicker: function(){
return new Ext.panel.Panel({
items: [{
xtype: 'textfield',
name: 'text',
fielLabel: 'text label'
}, {
xtype: 'colorfield',
name: 'color',
fielLabel: 'color field'
},
...
]
});
}
...
my value in this class is an object as follow:
{
text: 'value of textfield',
color: 'value of colorfield'
}
but when I set this object to value of class it shown in picker as [object object].
How Can I d?
Have the picker a confis like renderer to get the value of picker and then return correct string?
There is more to it than just template.
Below is example picker implementation for textfield + datefield, just adjust it to have colorfield instead.
// component has picker with both textfield and datefield;
// when picker is collapsed, data is displayed as "{text}, {date}"
Ext.define('ColorPicker', {
extend: 'Ext.form.field.Picker',
// picker template
config: {
popup: {
lazy: true,
$value: {
xtype: 'window',
closeAction: 'hide',
referenceHolder: true,
minWidth: 540,
minHeight: 60,
layout: 'form',
header: false,
resizable: true,
items: [
{
xtype: 'textfield',
name: 'text',
fielLabel: 'text label',
anchor: '100%',
reference: 'text'
},
{
xtype: 'datefield',
name: 'color',
fielLabel: 'color field',
anchor: '100%',
format: 'd.m.Y',
reference: 'date'
}
],
fbar: [
{ text: 'OK', reference: 'okBtn' },
{ text: 'Cancel', reference: 'cancelBtn' }
]
}
}
},
dateFormat: 'd.m.Y',
createPicker: function(){
var me = this,
popup = me.getPopup();
// the window will actually be shown and will house the picker
me.pickerWindow = popup = Ext.create(popup);
popup.lookupReference('okBtn').on('click', 'onPickerOk', me);
popup.lookupReference('cancelBtn').on('click', 'onPickerCancel', me);
popup.on({
close: 'onPickerCancel',
scope: me
});
me.updateValue(me.getValue());
return popup;
},
// ok picker button handler
onPickerOk: function () {
var me = this,
popup = me.pickerWindow,
textField = popup.lookupReference('text'),
dateField = popup.lookupReference('date'),
value = {
text: textField.getValue(),
date: dateField.getValue()
};
popup.hide();
me.setValue(value);
},
// cancel picker button handler
onPickerCancel: function () {
var me = this,
popup = me.pickerWindow;
popup.hide();
me.updateValue(me.getValue());
},
// override set value to support both string ("{text}, {date}")
// and object ({ text: "{text}", date: "{date}" })
setValue: function(value) {
var me = this,
text,
date,
v;
if (Ext.isObject(value)) {
value = value.text + ", " + Ext.Date.format(value.date, me.dateFormat);
}
me.callParent([ value ]);
// always update in case opacity changes, even if value doesn't have it
// to handle "hex6" non-opacity type of format
me.updateValue(value);
},
// update values in picker fields
updateValue: function (value) {
var me = this,
popup = me.pickerWindow,
textField,
dateField,
text = value.text,
date = value.date;
if (!popup || !popup.isComponent) {
return;
}
if (Ext.isString(value)) {
value = value.split(',');
text = (value[0] || '').trim();
date = Ext.Date.parse((value[1] || '').trim(), me.dateFormat);
} else if (Ext.isObject(value)) {
text = value.text || '';
date = value.date || '';
}
textField = popup.lookupReference('text');
dateField = popup.lookupReference('date');
if (!me.syncing) {
me.syncing = true;
textField.setValue(text);
dateField.setValue(date);
me.syncing = false;
}
}
});
Fiddle: https://fiddle.sencha.com/#fiddle/14kg
I'm new to Sencha extjs and I have a question.
I have my widget(HeaderRAM.js) with one splitbutton and a menuitemclick listener for every item, and my app.js with menuitemclick listener switch case.
Actually the widget 'Gestione RDA' is opened in the same browser tab. I'd like to open it in a new browser tab.
Could you help me to have Ext.getCmp('gestioneRAM').show() in a new browser tab?
Thanks in advance.
Here's the code:
//headerRAM.js
Ext.define('RAMUI.widget.HeaderRAM', {
extend: 'Ext.toolbar.Toolbar',
initComponent: function () {
codiceUtente = this.codiceUtente;
this.items = [
{
xtype: 'splitbutton',
text : traduci('Main menu' , document.getElementById('hddLingua').value),
id:'mainMenu',
menu: new Ext.menu.Menu({
items: [
// these will render as dropdown menu items when the arrow is clicked:
{ text : traduci('Gestione RAM' , document.getElementById('hddLingua').value),id:'menuGestRAM', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RAM' , document.getElementById('hddLingua').value)); }, value: 'GestioneRAM' },
{ text : traduci('Evasione RDA Mat' , document.getElementById('hddLingua').value), id: 'menuGestRDA', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA' , document.getElementById('hddLingua').value)); }, value: 'GestioneRDA' },
{ text : traduci('Evasione RDA Att' , document.getElementById('hddLingua').value), id: 'menuGestRDAAtt', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA Att' , document.getElementById('hddLingua').value)); }, value: 'GestioneRDAAtt' },
{ text : traduci('Autorizzazione RDA' , document.getElementById('hddLingua').value), id: 'menuGestRDADIAP', iconCls: 'RAM', handler: function () { messaggio( traduci('Gestione RDA DIAP' , document.getElementById('hddLingua').value)); }, value: 'GestioneRDADIAP' },
{ text : traduci('Report RAM' , document.getElementById('hddLingua').value), id: 'menuReportRAM', iconCls: 'RAM', handler: function () { messaggio( traduci('Report RAM' , document.getElementById('hddLingua').value)); }, value: 'ReportRAM' },
{ text : traduci('Gestione Utenti' , document.getElementById('hddLingua').value), id: 'menuGestUtenti', iconCls: 'utenti', handler: function () { messaggio( traduci('Gestione utenti' , document.getElementById('hddLingua').value)); }, value: 'GestioneUtenti' }
],
listeners: {
scope: this,
'click': function (menu, item, e) {
//Lancio un evento dell'header
menu.up().up().fireEvent('menuclick', menu, item, e);
}
}
})
},...
//app.js
var intestazione = Ext.create('RAMUI.widget.HeaderRAM', {
id: 'intestazione',
codiceUtente: this.codiceUtente,
listeners: {
scope: this,
'menuclick': function (menu, item, e) {
switch (item.value) {
case 'GestioneRDA':
//Se non esiste genero la maschera di gestione delle ram
if (Ext.getCmp('gestioneRDA') == null) {
Ext.create('RAMUI.widget.GestioneRDA', {
id: 'gestioneRDA',
societaUtente: this.societaUtente,
codiceUtente: this.codiceUtente,
flex: 1
});
}
else {
//Ext.getCmp('gestioneRDA').reset();
Ext.getCmp('gestioneRDA').show();
}
//Aggiungo la mappa di gestione delle RAM
Ext.getCmp('mainViewport').items.add(Ext.getCmp('gestioneRDA'));
break;
....
}
//mainViewport
Ext.create('Ext.container.Viewport', {
id: 'mainViewport',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
border: false,
items: [
intestazione,
corpo
],
listeners: {
'resize': function () {
this.doLayout();
}
}
});
ExtJS is particularly good for writing on-page applications where you do not need another "browser tab/window". Also, typical Ext application does not assume that any HTML markup exists but it creates one. Therefore, you rarely need to go down to DOM and if you do need it in a special case, you do not use the low-level calls such as getElementById.
I need to translate buttons of all selectField in my application. What I have done:
Ext.override(Ext.Picker, {
doneButton: 'Terminer',
cancelButton: 'Annuler'
});
Not working.
And...
{
xtype: 'selectfield',
name: 'default_language',
options: [
{text: 'English', value: 'en'},
{text: 'Francais', value: 'fr'}
],
doneButton: {
text: "Terminer"
}
}
Not working...
Any others idea ?
Thanks.
You can specify a configuration for both Phones/Tablets, Voila : http://docs.sencha.com/touch/2.0.2/#!/api/Ext.field.Select-cfg-defaultPhonePickerConfig
{
xtype : 'selectfield',
label : 'My Label',
defaultPhonePickerConfig : {
doneButton : 'You Button Text!',
cancelButton : 'You Button Text!'
},
options : [
{ text : 'First Option', value : 'first' },
{ text : 'Second Option', value : 'second' },
{ text : 'Third Option', value : 'third' }
]
}
Is there a way to make an ExtJS4 PropertyGrid (Ext.grid.property.Grid) non-editable?
There is no "editable" or "readonly" config option AFAICS.
Another solution is to add a listener, that prevents starting the editing component:
listeners: {
'beforeedit': {
fn: function () {
return false;
}
}
}
The problem with this solution is, that one can not mark a cell to copy (Ctrl+C) the contents.
Use the sourceConfig to set the editor to a Ext.form.DisplayField:
Ext.create('Ext.grid.PropertyGrid', {
sourceConfig: {
field1: {
displayName: 'Editable Field'
},
field2: {
displayName: 'Readonly Field',
editor: Ext.create('Ext.form.DisplayField')
}
},
source: {
field1: "Some property",
field2: "Some other property",
}
});
One more decision, but don't allow to select text thereafter: myGrid.findPlugin('cellediting').disable();
One solution is to prevent the selection of any cell:
var myPropertyGrid = Ext.create('Ext.grid.property.Grid', { ... });
myPropertyGrid.getSelectionModel().setLocked(true);
Ext.define('MyPropertyGrid', {
extend: 'Ext.grid.property.Grid',
xtype: 'mypropertygrid',
source: {
field1: 'value of field1',
field2: 'value of field2'
},
sourceConfig: {
field1: {
editor: {disabled: true}
},
field2: {
editor: {disabled: true}
}
}
});
I test it on Extjs 6.0.