Develop Reference

Focus a textfield inside a list

The ExtJS docs describe a method focus for textfields that will either focus a textfield or return false: https://docs.sencha.com/extjs/6.7.0/modern/Ext.field.Text.html#method-focus
Generally this seems to work just fine, but once the textfield that should be focused is inside a list (part of the listitem) the focus is immediately removed and set to the parent listitem container. Focus however returns true (the focus is actually on the field for a few ms).
https://fiddle.sencha.com/#view/editor&fiddle/315h shows this by example. The first button tries to focus the first textfield inside the list (which fails) and the second one focuses the field below the list.
Is there any way to prevent the listitem from becoming focused?
Code from the fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
fullscreen: true,
xtype: 'container',
items: [{
xtype: 'list',
itemConfig: {
xtype: 'container',
items: [{
xtype: 'component',
html: 'Row'
}, {
xtype: 'textfield',
value: 'Focus Me'
}],
margin: '15px 0'
},
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('list').down('textfield').focus();
Ext.toast(this.up('container').down('list').down('textfield').hasFocus + '');
}
}, {
xtype: 'textfield',
itemId: 'focusable',
value: 'Focusable'
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('#focusable').focus();
Ext.toast(this.up('container').down('#focusable').hasFocus + '');
}
}]
});
}
});
On ExtJS 6.7 the first click on a textfield in a list does not even work but this seems to be fixed in 7.0.

Set defaultFocus for listitem container. Its work for me (fiddle).
P.S. thank you for your fiddle example. few do it.

How to add a fieldset in EXTJS on button click

My problem is when I click Add button it needs to add a fieldset ("rulepanel") after the previous fieldset, but in my code if I execute it the new fieldset is added on top of the previous (I can be able to notice it as the letters are getting bold when click on Add button).
This is my code:
var rulepanel = {
xtype: 'fieldset',
border: false,
itemId: 'rule',
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'value',
name: 'value',
allowBlank: false,
placeholder: 'value'
}, {
xtype: 'button',
id: 'add',
text: 'Add',
handler: function (button, event) {
me.insert(rulepanel);
}
}, {
xtype: 'button',
id: 'branch',
text: 'Branch'
}]
}]
};
Ext.apply(me, {
items: [rulepanel]
});

Your code should be like below:-
{
xtype: 'button',
text: 'Add',
handler: function (button, event) {
button.up('fieldset').insert(rulepanel);
}
}
You can find running example here.
Hope this will help you.

CKEDITOR dialog - open second tab on button click

I have CKEDITOR dialog with two tabs:
- view one
- view two
Inside view one I have a button that should open view two if clicked by the user.
But I don't know how to do this. This is my CKEDITOR.dialog code:
CKEDITOR.dialog.add('placeholder', function(editor) {
var lang = editor.lang.placeholder,
generalLabel = editor.lang.common.generalTab,
validNameRegex = /^[^\[\]<>]+$/;
return {
title: 'some title',
minWidth: 300,
minHeight: 150,
contents: [{
id: 'initial-view',
label: 'view one',
title: generalLabel,
elements: [{
id: 'name-one',
style: 'width: 100%;',
type: 'html',
html: 'Organizational units'
}, {
type: 'button',
id: 'buttonId',
label: 'Click me',
title: 'My title',
setup: function(widget) {
},
onClick: function(widget) {
// this = CKEDITOR.ui.dialog.button
My code should go here........?
}
}]
}, {
id: 'organizational-unit-view',
label: 'view two',
title: generalLabel,
elements: [
// Dialog window UI elements.
{
id: 'list-of-vars',
style: 'width: 100%;',
type: 'html',
html: 'second view --- html goes here',
label: lang.name,
setup: function(widget) {
this.setValue(widget.data.name);
},
commit: function(widget) {
widget.setData('name', this.getValue());
}
}
]
}]
};
});
My question is how should I handle that button click? What method should I use? Basically how to open view two?

I found a solution. On click event is should use getDialog():
this.getDialog().selectPage('your-content-id);
Like this:
onClick: function(widget) {
this.getDialog().selectPage('organizational-unit-view');
}

Toolbar in extjs4

I have some toolbar in my exts 4 window
this.tbar = {
xtype: 'toolbar',
items: [
{
id: "btnClearFilter",
itemId: "btnClearFilter",
action: 'delFilter',
disabled: true,
handler: function (btn, e) {
btn.setDisabled(true);
}
},
'-',
{
text: 'Export',
tooltip: 'Export',
disabled: false,
menu : {
items: [{
text: 'Export 1'
, icon: 'Content/Resources/images/Excel-16.png'
, action: 'export'
}]
}
}
]
};
From controller i can cause action delFilter like this
'ns-main-win > toolbar button[action=delFilter]': {
click: this.delFilter
},
How couse action from menu item?

I dunno what you mean, you want to trigger the action on delFilter?
Ext.getCmp('btnClearFilter').click()

Have you tried giving the menu item an id and then searching using that
'#export'{
click:this.export
}

navigation not working in sencha

Hi i am new to sencha and i am trying on navigation here i am clicking on one button in VehicleSubPage1 then it navigate to AccountInfo but it is not working,
here code i am writing
can any one help me
*VehicleSubPage1 class *
Ext.define("myproject.view.VehicleSubPage1", {
extend: 'Ext.navigation.View',
xtype:'VehicleSubPage1form',
requires: [
'myproject.view.AccountInfo'
],
config: {
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
view.push({
xtype:'AccountInfoform'
});
}
}
]
}
});
AccountInfo class
Ext.define("myproject.view.AccountInfo", {
extend: 'Ext.Panel',
xtype:'AccountInfoform',
config: {
url: 'contact.php',
title: 'Account Info',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'button',
text: 'send',
ui: 'confirm',
handler:function(){
alert("clicked");
}
}
]
}
});

It seems the problem is that view in the button handler is undefined. What you actually want to do is to call the push method of the navigation view. So add an id attribute to your VehicleSubPage1 and change the handler into the following:
function() {
var accountInfo = Ext.getCmp('accountInfo'); //assuming you have set the id of VehicleSubPage1 as id: 'accountInfo'
accountInfo.push({
xtype:'AccountInfoform'
});
}