We Keep Coding

How to restore grid focus after data reload in ExtJS?

I have a view in ExtJS that contains a grid where the user can select an entry plus some panel with details about the currently selected row. Each time another row is selected the view is reloaded, which causes the grid to loose input focus for keyboard navigation.
How can I reload grid store data and keep input focus on the grid? My model defines idProperty and thus the correct row gets selected, but column selection and input focus gets lost. I am using ExtJS v7.3.0.55 with the Classic Triton theme.
Example
Extend the code in the existing Grid with JSON Store Sencha Fiddle with a data model and some grid event listener to reproduce the issue:
Ext.application({
name: 'Fiddle',
launch: function () {
// My data model with custom ID field
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'},
],
idProperty: 'email',
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
model: 'User',
proxy: {
type: 'ajax',
// Loading data from ./simpsons.json in the fiddle ./Data folder.
url: 'simpsons.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
store: 'simpsonsStore',
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
// Add some event handler to reload grid data, restore selected row
listeners: {
select: function (sender) {
console.log('grid selection update');
var record = sender.getSelected();
var store = sender.getStore();
store.load();
// This will restore the selected row, but grid focus is lost
sender.setSelected(record);
}
}
});
}
});

Try to put the selection in the store`s load handler:
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: "100%",
title: 'Simpsons',
// Using Named Store
store: 'simpsonsStore',
// Load the data
autoLoad: true,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
select: function (selectionRowModel, selectedRecord, selectedIndex) {
var store = selectionRowModel.getStore();
store.on('load', function(store) {
selectionRowModel.select(selectedIndex, true, true);
}, this, {
single: true
})
store.load();
}
}
});

ExtJS 5 Uncaught TypeError: cannot read property 'parentNode' of null in Tab Panel

I am using ExtJS version 5.1.0.
Problem: I have a Ext.panel.Panel in my view. In this panel's beforeRender, I am trying to add an xtype:'form' whose items contain a tabpanel with multiple tabs.
When I switch the tab after some seconds of waiting on other tab, I get this exception
Uncaught TypeError: cannot read property 'parentNode' of null
And as a result of this, entire view of the switched tab is lost(its blank).
I have been trying this for a time now, but unable to find a solution.
Any suggestions on this would be a great help.
Here is my code snippet:
Ext.define({
'myClass',
extend: 'Ext.panel.Panel',
layout: 'fit',
viewModel: {
type: 'abc'
},
beforeRender: function() {
var me = this;
me.add({
xtype: 'form',
trackResetOnLoad: 'true',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
me.getContainer()
]
});
},
getContainer: function() {
var me = this;
var tabpanel = Ext.create({
'Ext.TabPanel',
allowDestroy: false,
reference: 'abc', //being used in application somewhere
layout: 'fit',
border: 0,
activeTab: 0,
items: [{
xtype: 'container',
bind: {
data: {
abcd
}
},
title: 'tab1',
layout: 'fit',
items: [
me.createContainer1() // contains form fields
]
},
{
xtype: 'container',
title: 'tab2',
layout: 'fit',
bind: {
data: {
abcf
}
},
items: [
me.createContainer2() // contains form fields
]
}
]
});
}
});
This is not a duplicate, it is a issue related to tabpanel and not simple HTML. It uses framework related knowledge. If anyone has idea about this, then please explain.

Firstly you need to use beforerender event instead of beforeRender and beforerender will be inside of listeners.
And also you can return directly xtype instead of creating like below example
createField: function() {
return [{
xtype: 'textfield',
emptyText: 'Enter the value',
fieldLabel: 'Test'
}];//You here return Object or Array of items
}
In this FIDDLE, I have created a demo using your code and make some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//Define the viewmodel
Ext.define('ABC', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.abc',
data: {
tab1: 'Tab 1',
tab2: 'Tab 2',
tab3: 'Tab 3',
tab4: 'Tab 4',
title: 'Basic Example'
}
});
//Define the panel
Ext.define('MyPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mypanel',
layout: 'fit',
//This function will return field items for container or panel
createContainer: function (fieldLabel) {
return {
xtype: 'textfield',
emptyText: 'Enter the value',
fieldLabel: fieldLabel
};
},
//This function will return tabpanel for form items.
getContainer: function () {
var me = this;
return {
xtype: 'tabpanel',
allowDestroy: false,
//reference: 'abc', //being used in application somewhere
layout: 'fit',
border: 0,
activeTab: 0,
items: [{
bind: '{tab1}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab1 field') // contains form fields
}, {
bind: '{tab2}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab2 field') // contains form fields
}, {
bind: '{tab3}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab3 field') // contains form fields
}, {
bind: '{tab4}',
bodyPadding: 10,
layout: 'fit',
items: me.createContainer('Tab4 field') // contains form fields
}]
};
},
listeners: {
beforerender: function (cmp) {
var me = this;
//Add form inside of panel
me.add({
xtype: 'form',
trackResetOnLoad: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: me.getContainer()
});
}
}
});
//Create the mypanel
Ext.create({
xtype: 'mypanel',
viewModel: {
type: 'abc'
},
bind: '{title}',
renderTo: Ext.getBody()
});
}
});

What in ExtJS 5.1.1 fixed the bug that BufferedStore with remoteFilter and remoteSort calls the first page twice when filtering?

If you run this code in Ext 5.1.0.107, you'll see 2 get request for the first page. When you run it in 5.1.1.451, you'll see just 1 get request.
What was done to fix this?
Reason I'm asking that I cannot upgrade Ext right now and I need to fix it in my version (that is actually 5.0.0).
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.BufferedStore', {
proxy: {
type: 'rest',
url : '/test'
},
autoLoad: false,
autoSync: false,
remoteFilter: true,
remoteSort: true,
fields: ['name']
});
var filterStore = function() {
store.filter([{
id : 1,
property : 'name',
value : 'test'
}]);
}
Ext.create('Ext.grid.Panel', {
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
type : 'button',
text : 'Filter store',
handler : filterStore
}]
}],
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' }
],
renderTo: Ext.getBody()
});
}
});
(fiddle)

Trying to pop-up window that contains a form, but form not shown - extjs 5

I am trying to display a pop-up window that contains a form in extjs 5, using django-rest as backend. I manage to get the pop-up window shown, but the form inside it is not shown. If I put just an html tag instead of the form, the tag contents are shown. I am very confused as I can't make it work to show the form. Any help would be so much appreciated. The codes are:
Controller:
Ext.define('MyApp.controller.Manage', {
extend: 'Ext.app.Controller',
views: ['Manage'],
// controller initialisation
init: function() {
// save scope
var manageController = this;
console.log('manage controller started');
// instanciate view class but hide initially
this.view = this.getView('Manage').create().hide();
// Request manage variables (lastDayUpd)
Ext.Ajax.request({
url: '/api/manage/',
method: 'GET',
success: function(response, options){
console.log('got last day upd');
// Decode response
var res = Ext.util.JSON.decode(response.responseText).results[0].lastDayUpd;
console.log(res);
// Get manage panel from container
var cp = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('lastDayUpd');
// Set data to display last day updated
cp.setConfig('html', ('Last day updated: '+res));
},
failure: function(response, options) {
console.log('not got last day upd');
}
});
this.control({
// register for the logout-click
'#logoutButton': {
click: function() {
// mask the complete viewport
this.view.mask('Logout…')
// ask the login-controller to perform the logout in the backend
MyApp.getApplication().getController('Login').performLogout(function(success) {
if(!success) {
// return WITHOUT unmasking the main app, keeping the app unusable
return Ext.Msg.alert('Logout failed', 'Close and restart the Application')
}
// unmask and hide main viewport and all content
this.view.unmask();
this.view.hide();
// relaunch application
MyApp.getApplication().launch();
});
}
},
// register for click in the navigation tree
'#navTree': {
itemclick: function(tree, node) {
// ignore clicks on group nodes
// TODO: pass click on to first sub-item
// ignore clicks on non-leave nodes (groups)
if(!node.data.leaf)
return;
// pass the id of the clicked node to the content-panel
// enable the corresponding content view
this.getContentPanel().setActiveItem(node.data.itemId);
}
},
// Show update form to perform update
'#updButton': {
click: function(){
//alert('Clicked');
//navigationController.getController('Manage').view.show()
this.showUpdateForm();
}
}
});
},
showUpdateForm: function(){
// Get manage panel from container
var form = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('updateDaskalosBox').show();
console.log('form is:');
console.log(form);
console.log('show update form');;
},
});
View:
Ext.define('MyApp.view.Manage', {
layout: 'border',
extend: 'Ext.container.Container',
renderTo: Ext.getBody(),
id: "manageContainer",
// todo: not resizing correctly
width: '100%',
height: '100%',
items: [{
region: 'west',
xtype: 'treepanel',
itemId: 'navTree',
width: 150,
split: true,
rootVisible: false,
title: 'Navigation',
tbar: [
{ text: 'Logout', itemId: 'logoutButton' }
]
},
{
region: 'center',
xtype: 'container',
itemId: 'manageContentPanel',
layout: {
type: 'border',
//columns: 3,
//deferredRender: true
},
items: [
{
itemId: 'lastDayUpd',
title: 'Manage Daskalos',
xtype: 'panel',
buttons: [
{
text: 'Update',
itemId: 'updButton'
},
{
text: 'Back',
itemId: 'backButton',
}
],
html: 'Last Day Updated: '
},
{
xtype: 'messagebox',
itemId: 'updateDaskalosBox',
layout: 'fit',
title: 'Update daskalos',
//html: 'A pop up',
//floating: true,
//closable : true,
items: [
{
xtype: 'panel',
itemId: 'updateDaskalosPanel',
//layout: 'fit',
items: [
{
xtype: 'form',
itemId: 'updateDaskalosForm',
//url: '', // to fill
layout: 'fit',
//renderTo: 'updateForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100
},
buttons: [
{
text: 'Update',
itemId: 'updButton',
formBind: true,
},
{
text: 'Cancel',
itemId: 'cancelButton',
}
],
items: [
//Just one field for now to see if it works
//{
//xtype: 'datefield',
////anchor: '100%',
//fieldLabel: 'From',
////name: 'from_date',
////maxValue: new Date() // limited to the current date or prior
//},
{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}
],
},
],
},
],
},
]
}
],
});
After controller initialization, I want when the user clicks the update button to pop up a window that contains a form to post data to the server. The pop-up is thrown, but the form inside the panel that the window contains as child item seems that has the problem. Does anyone see what I miss here?
Thanks for the help! Babis.

Why you dont just create a window containing a form? Your "pop-up window" is a messagebox, that you abuse. There is also no need to put a form in a panel. A form extends from panel.
// you have some trailing commas in your code

Ext.define('MyApp.view.Manage', {
extend: 'Ext.window.Window',
alias : 'widget.manage',
requires: ['Ext.form.Panel'],
height: 300,
width: 600,
layout: 'fit',
resizable: false,
autoShow: true,
animCollapse:false,
iconCls: 'icon-grid',
initComponent: function() {
this.items = [{
xtype: 'form',
/*
*
* Start you code for form
*/
}];
this.callParent(arguments);
}
});
You want a form in a window, but can you tell why are you extending container ??

Controller's listeners catching events (panel clicks) from other views

I have this weird issue with ExtJS 4.2.1.
I have a controller whose listeners catch events from a view that it shouldn't.
Here's said controller:
Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'panel': {
render: function (panel) {
panel.body.on('click', function (panel, e) {
alert('onclick');
});
}
}
});
}
});
It 'controls' this view:
Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'fit',
ui: 'cssmenu',
loader: {
autoLoad: true,
url: '/resources/notloggedin.html'
}
});
But it also catches panel clicks from this view:
Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
border: false,
activeItem: 0,
requires: ['Ext.grid.Panel'],
initComponent: function () {
this.items = [
{
xtype: 'panel',
title: ''
},
{
xtype: 'gridpanel',
id: 'contactlistgrid',
store: Ext.data.StoreManager.lookup('contactStore'),
columns: [
....
],
features: [{
ftype: 'grouping',
groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
hideGroupedHeader: true,
startCollapsed: false
}],
viewConfig: { id: 'contactlistgridview' }
},
{
xtype: 'gridpanel',
id: 'caselistgrid',
store: Ext.data.StoreManager.lookup('caseStore'),
columns: [
{ text: 'Title', dataIndex: 'title' },
{ text: 'Description', dataIndex: 'description' },
{ text: 'Ticket number', dataIndex: 'ticketnumber' }
],
viewConfig: { id: 'caselistgridview' }
}
]
this.callParent(arguments);
}
});
Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.
Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...
Thanks.

The fix was two fold as shown in here:
http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1
Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.