Related
I'm writing a Extjs app in the 6.2.0 version, I’ve got a routing situation.
My problem is when we enter on the NavigateDeep if I enter the Url ok it catches but it doesn’t render.
I define the routes on the main Controller like:
Ext.define('App.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
listen : {
controller : {
'*' : {
unmatchedroute : 'onRouteChange1',
changeroute: 'changeRoute'
}
}
},
routes: {
':node': 'onNavigate',
':node/:id' : 'onNavigateDeep',
':node/:id/:tabid' : 'onNavigateDeepTab'
},
lastView: null,
onRouteChange1: function(){
console.log("hier unmatched route");
},
setCurrentView: function(hashTag) {
hashTag = (hashTag || '').toLowerCase();
console.log("hash:" + hashTag);
var me = this,
refs = me.getReferences(),
mainCard = refs.mainCardPanel,
mainLayout = mainCard.getLayout(),
navigationList = refs.navigationTreeList,
store = navigationList.getStore(),
node = store.findNode('routeId', hashTag) ||
store.findNode('viewType', hashTag),
view = (node && node.get('viewType')) || 'page404',
lastView = me.lastView,
existingItem = mainCard.child('component[routeId=' + hashTag + ']'),
newView;
// Kill any previously routed window
if (lastView && lastView.isWindow) {
lastView.destroy();
}
lastView = mainLayout.getActiveItem();
if (!existingItem) {
newView = Ext.create({
xtype: view,
routeId: hashTag, // for existingItem search later
hideMode: 'offsets'
});
}
if (!newView || !newView.isWindow) {
// !newView means we have an existing view, but if the newView isWindow
// we don't add it to the card layout.
if (existingItem) {
// We don't have a newView, so activate the existing view.
if (existingItem !== lastView) {
mainLayout.setActiveItem(existingItem);
}
newView = existingItem;
}
else {
// newView is set (did not exist already), so add it and make it the
// activeItem.
Ext.suspendLayouts();
mainLayout.setActiveItem(mainCard.add(newView));
Ext.resumeLayouts(true);
}
}
navigationList.setSelection(node);
if (newView.isFocusable(true)) {
newView.focus();
}
me.lastView = newView;
},
onNavigationTreeSelectionChange: function (tree, node) {
var to = node && (node.get('routeId') || node.get('viewType'));
if (to) {
console.log("to;:" + to);
this.redirectTo(to);
}
},
onToggleNavigationSize: function () {
var me = this,
refs = me.getReferences(),
navigationList = refs.navigationTreeList,
wrapContainer = refs.mainContainerWrap,
collapsing = !navigationList.getMicro(),
new_width = collapsing ? 64 : 250;
if (Ext.isIE9m || !Ext.os.is.Desktop) {
Ext.suspendLayouts();
refs.logo.setWidth(new_width);
navigationList.setWidth(new_width);
navigationList.setMicro(collapsing);
Ext.resumeLayouts(); // do not flush the layout here...
// No animation for IE9 or lower...
wrapContainer.layout.animatePolicy = wrapContainer.layout.animate = null;
wrapContainer.updateLayout(); // ... since this will flush them
}
else {
if (!collapsing) {
// If we are leaving micro mode (expanding), we do that first so that the
// text of the items in the navlist will be revealed by the animation.
navigationList.setMicro(false);
}
// Start this layout first since it does not require a layout
refs.logo.animate({dynamic: true, to: {width: new_width}});
// Directly adjust the width config and then run the main wrap container layout
// as the root layout (it and its chidren). This will cause the adjusted size to
// be flushed to the element and animate to that new size.
navigationList.width = new_width;
wrapContainer.updateLayout({isRoot: true});
navigationList.el.addCls('nav-tree-animating');
// We need to switch to micro mode on the navlist *after* the animation (this
// allows the "sweep" to leave the item text in place until it is no longer
// visible.
if (collapsing) {
navigationList.on({
afterlayoutanimation: function () {
navigationList.setMicro(true);
navigationList.el.removeCls('nav-tree-animating');
},
single: true
});
}
}
},
onMainViewRender:function() {
if (!window.location.hash) {
this.redirectTo("dashboard");
}
},
changeRoute: function(controller,route){
this.redirectTo(route,true);
console.log("change route fired");
},
onClickLogoutButton: function () {
// Remove the localStorage key/value
localStorage.removeItem('LoggedIn');
// Remove Main View
this.getView().destroy();
// Add the Login Window
Ext.create({
xtype: 'login'
});
},
onClickShareButton: function(){
var text = window.location;
window.prompt("Copy to clipboard:", text);
},
onNavigate:function(node){
console.log("on route change");
this.setCurrentView(node);
},
onNavigateDeep: function (node, id) {
console.log("Tab");
console.log(node + '/' + id);
var route = node+'/'+id;
this.setCurrentView(route);
},
onNavigateDeepTab: function (node, id, tabid) {
console.log("navigate Tab");
}
});
My main view is:
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Viewport',
xtype: 'app-main',
requires: [
'App.view.Dashboard',
'App.view.immo.List',
'App.view.settings.Settings',
'App.view.news.News',
'App.view.help.Help'
],
controller: 'main',
viewModel: 'main',
cls: 'sencha-dash-viewport',
itemId: 'mainView',
layout: {
type: 'vbox',
align: 'stretch'
},
listeners: {
render: 'onMainViewRender'
},
items: [{
xtype: 'toolbar',
cls: 'dash-dash-headerbar shadow',
height: 64,
itemId: 'headerBar',
items: [{
xtype: 'component',
reference: 'logo',
cls: 'logo',
html: '<div class="main-logo"><img src="resources/images/logo.png">App</div>',
width: 250
}, {
margin: '0 0 0 8',
ui: 'header',
iconCls:'x-fa fa-navicon',
id: 'main-navigation-btn',
handler: 'onToggleNavigationSize',
tooltip: 'Navigation umschalten'
},
'->',
{
xtype: 'button',
ui: 'header',
iconCls: 'x-fa fa-share-alt',
handler: 'onClickShareButton',
tooltip: 'Share'
},
{
iconCls:'x-fa fa-question',
ui: 'header',
href: '#help',
hrefTarget: '_self',
tooltip: 'Hilfe'
}, {
iconCls:'x-fa fa-th-large',
ui: 'header',
href: '#Dashboard',
hrefTarget: '_self',
tooltip: 'Zum Dashboard'
}, {
xtype: 'button',
ui: 'header',
iconCls: 'x-fa fa-power-off',
handler: 'onClickLogoutButton',
tooltip: 'Logout'
}]
}, {
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 250,
expanderFirst: false,
expanderOnly: false,
listeners: {
selectionchange: 'onNavigationTreeSelectionChange'
}
}, {
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}]
}]
});
When we click on the tree I change the container but one of them has the route if the :id where I have a Tab:
Ext.define('App.view.settings.Settings',{
extend: 'Ext.tab.Panel',
xtype: 'settings',
itemId:'settings',
requires: [
'App.view.settings.SettingsController',
'App.view.settings.SettingsModel',
'App.view.settings.property.Property',
'App.view.settings.user.User'
],
controller: 'settings-settings',
viewModel: {
type: 'settings-settings'
},
reference: 'tab',
tabPosition: 'left',
tabBar:{
flex: 1,
tabRotation: 0,
tabStretchMax: true,
cls: 'immoNavi'
},
layout: 'Container',
defaults: {
padding: 0,
textAlign: 'left'
},
listeners: {
tabchange: 'onTabChange'
},
items: [{
xtype: 'component',
tabConfig:{
hidden: true
}
},{
title: 'Property',
itemId: 'property',
xtype: 'property',
cls: 'container'
},{
title: 'User',
itemId: 'user',
xtype: 'user'
}]
});
I went through the documentation but didn't find any tip that might help me with it. What am I missing here? Should I take care the rendering on the tab controller? Or How?
Thanks in advance for the help
In ExtJS, on a menu toolbar button, I am trying to remove the current panel in my center window, then recreate it with the new selection. I do not understand the proper way to do this. So far when I click the menu item, it removes whatever is currently there successfully, then it will add the new panel successfully. The problem is the 2nd time I hit the button I get the following error:
REGISTERING DUPLICATE COMPONENT ID 'mainportalID'.
I realize its telling me I already used this ID, but then what would be the correct way to remove the current panel, and replace with a new one?
Here is my view controller:
selectMenuButton: function (button, e) {
console.log('select menu button section was hit')
console.log(button);
console.log(e);
var optionString = button.text;
var myDetailsPanel = Ext.getCmp('navview');
console.log(myDetailsPanel);
var count = myDetailsPanel.items.items.length;
if (count > 0) {
myDetailsPanel.items.each(function (item, index, len) {
myDetailsPanel.remove(item, false);
});
}
myDetailsPanel.add({
xtype: optionString
});
}
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
]
});
This is my view
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportal',
id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted panel
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
reference: 'gridtextfield',
//id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted view controller
onComboboxSelect: function (combo, record, eOpts) {
console.log('new listener was hit');
//return selected Item
var selectedValue = record.get('ClientName');
var selectedCID = record.get('ClientID');
//find the grid that was created
var me = this;
console.log(me);
var xxx = this.lookupReference('gridtextfield');
debugger;
//debugger;
var mainPortalView = Ext.getCmp('mainportalID');
var targetGrid = mainPortalView.down('grid');
//find the store associated with that grid
var targetStore = targetGrid.getStore();
//load store
targetStore.load({
params: {
user: 'stephen',
pw: 'forero',
cid: selectedCID
}
//callback: function (records) {
// Ext.each(records, function (record) {
// console.log(record);
// });
// console.log(targetStore);
//}
});
},
added listeners to MainPortal.js
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
],
listeners: {
destroy: function () {
debugger;
}
}
});
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
//id: 'mainportalID',
itemId: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
],
listeners: {
destroy: function () {
debugger;
}
}
});
I have created 3 panels,2 buttons(Prev,next) in Extjs and added to viewport.
At a time only one panel should visible (by default first panel).
On click of next button it should display next panel,then if i click on "prev" button it should display the previous panel.
Now i have wrote a code for panels and its working as ,panels are not navigating to left and right properly.
Here is my code :
Ext.application({
name: 'HelloExt',
requires: [
'Ext.util.Point'
],
launch: function() {
var button =Ext.create('Ext.Button', {
text: 'Toggle Containers',
handler: function () {
if (this.clickCount==1) {
containerPanel1.getEl().scrollRight;
containerPanel2.getEl().slideIn('t', 'toggle');
this.clickCount=2;
} else {
this.clickCount = 1;
containerPanel1.getEl().slideIn('t', 'toggle');
containerPanel2.getEl().scrollLeft;
}
},
renderTo: Ext.getBody()
});
var containerPanel1 = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
draggable: {
insertProxy: false,
startDrag: function(e) {
var el = Ext.get(this.getEl());
el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');
this.x = el.getLeft(true);
this.y = el.getTop(true);
},
afterDrag: function(e) {
this.x = el.getLeft(true);
this.y = el.getTop(true);
this.fireEvent('itemdrag', this);
}
},
width:400,
height:550,
layout: 'column',
bodyStyle:{'background-color':'blue'},
margin:'30 0 0 20',
suspendLayout: true ,
defaults :{
xtype: 'panel',
margin:'30 0 0 0',
height: 450,
columnWidth: 0.2
},
items: [
{
html: 'Child Panel 1',
},
{
html: 'Child Panel 2',
},
{
html: 'Child Panel 3',
},
{
html: 'Child Panel 4',
},
{
html: 'Child Panel 5',
}
]
});
containerPanel1.draggable;
var containerPanel2 = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
draggable: {
insertProxy: false,
startDrag: function(e) {
var el = Ext.get(this.getEl());
el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');
this.x = el.getLeft(true);
this.y = el.getTop(true);
},
afterDrag: function(e) {
this.x = el.getLeft(true);
this.y = el.getTop(true);
this.fireEvent('itemdrag', this);
}
},
width:400,
height:550,
layout: 'column',
bodyStyle:{'background-color':'green'},
margin:'30 0 0 20',
suspendLayout: true ,
defaults :{
xtype: 'panel',
margin:'30 0 0 0',
height: 300,
columnWidth: 0.2
},
items: [
{
html: 'Child Panel 1',
},
{
html: 'Child Panel 2',
},
{
html: 'Child Panel 3',
},
{
html: 'Child Panel 4',
},
{
html: 'Child Panel 5',
}
]
});
containerPanel2.draggable;
containerPanel2.getEl().hide();
Ext.create('Ext.container.Viewport', {
layout: 'column',
items: [containerPanel1,containerPanel2,button]
});
}
});
Please help me..Thanks
I was just building a similar project, so here's an example snippet you could use. Notice that you can change the amount and order of panels and the code will still work. The click handler simply looks for the visible panel first, and then depending on the direction attempts to either go forward or backward.
Ext.define('MyApp.view.MyViewport1', {
extend: 'Ext.container.Viewport',
id: 'switchPanels',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
height: 100,
html: 'this is panel 1',
title: 'My Panel A'
},
{
xtype: 'panel',
height: 100,
hidden: true,
html: 'this is panel 2',
title: 'My Panel B'
},
{
xtype: 'panel',
height: 100,
hidden: true,
html: 'this is panel 3',
title: 'My Panel C'
},
{
xtype: 'container',
switchPanel: function(forward) {
var p = Ext.ComponentQuery.query('panel(true){isVisible()}')[0]; // visible panel
var n = forward ? p.nextSibling('panel(true)') : p.previousSibling('panel(true)'); // closest sibling
if (n) { // don't let go past the last one
p.hide();
n.show();
}
else {
console.log("can't go past the " + (forward ? 'end' : 'beginning'));
}
},
id: 'buttons',
items: [
{
xtype: 'button',
handler: function(button, event) {
button.up().switchPanel(false);
},
text: 'Prev'
},
{
xtype: 'button',
handler: function(button, event) {
button.up().switchPanel(true);
},
text: 'Next'
}
]
}
]
});
me.callParent(arguments);
}
});
You need to use card(Wizard) layout for this. please refer simple sample example below.
Im sure this will help you to resolve your problem.
var active = 0;
var main = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
layout: 'card',
tbar: [{
text: 'Next',
handler: function(){
var layout = main.getLayout();
++active;
layout.setActiveItem(active);
active = main.items.indexOf(layout.getActiveItem());
}
}],
items: [{
title: 'P1'
}, {
title: 'P2'
}, {
title: 'P3',
listeners: {
beforeactivate: function(){
return false;
}
}
}]
});
Please refer card(wizard) layout in the below link.
http://docs.sencha.com/extjs/4.2.0/#!/example/layout-browser/layout-browser.html
Thanks
I have form panel as a menu item. The problem is that it constantly looses focus and standard navigation controls like tab are not working. Is there some kind of config to make this work? Notice i extend Ext.panel.Panel instead of Ext.form.Panel. When i use the second one i get origin.on is not a function. Here is code:
this.tbar = [{
xtype: 'tbfill'
}, {
xtype: 'tbseparator'
}, {
xtype: 'button',
text: 'Wyszukiwanie',
iconCls: 'icon-magnifier',
menu: {
focusOnToFront: true,
items: [{
xtype: 'decision_quicksearch',
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
}]
},
listeners: {
afterrender: function () {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(this.menu.items.items[0], {
parentComponent: this
});
}
}
}];
And the form:
Ext.define('GSIP.view.decisions.DecisionQuickSearchPanel' ,{
extend: 'Ext.form.Panel',
alias : 'widget.decision_quicksearch',
layout:'anchor',
title:'Wyszukiwanie decyzji',
frame:true,
width:300,
defaults: {
anchor: '100%'
},
style: {
marginLeft: 'auto',
marginRight: 'auto'
},
bodyPadding:20,
initComponent: function() {
this.addEvents('quicksearch');
this.items = this.createForm();
this.buttons = [{
text:'Szukaj',
iconCls:'icon-magnifier',
scope:this,
handler:this.processForm
}],
this.callParent(arguments);
},
createForm:function() {
var items = [{
xtype:'textfield',
fieldLabel:'Znak',
labelWidth:40,
name:'sign'
},{
xtype:'textfield',
fieldLabel:'Numer',
labelWidth:40,
name:'number'
},{
xtype:'textfield',
fieldLabel:'Rok',
labelWidth:40,
name:'suffix',
}];
return items;
},
processForm:function() {
var result = this.buildFilter();
this.fireEvent('quicksearch', result);
this.parentComponent.hideMenu();
},
buildFilter:function() {
var sign = this.down('textfield[name=sign]').getValue();
var number = this.down('textfield[name=number]').getValue();
var suffix = this.down('textfield[name=suffix]').getValue();
var result = new Array();
var res = {
name:'documents.sign',
valuesType:'string',
filterType:'like',
values:[{id:1, value:sign}]
};
result.push(res);
var res = {
name:'documents.number',
valuesType:'string',
filterType:'like',
values:[{id:1, value:number}]
};
result.push(res);
var res = {
name:'documents.suffix',
valuesType:'string',
filterType:'like',
values:[{id:1, value:suffix}]
};
result.push(res);
return result;
}
});
I have accomplished a similar functionality but in a different way.
What I did is simply made the button generate an Ext.Window with no header and limited border and positioned it under the button on open. You can then use MouseOut events to close the window and it will operate just like a menu or you could put the header on the bottom and place a close tool and have the window "pin".
buttonClick: function (btn, e, opts) {
var popUpWindow = Ext.create('Ext.window.Window', {
width: 450,
maxHeight: 400,
resizable: false,
closable: false,
title: 'Report Filters',
headerPosition: 'bottom',
border: false,
draggable: false,
bodyStyle: 'background:white;padding:5px;',
items: [
//...your form
]
});
popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y - 7);
}
Here is what i ended up with. It seems that this is exactly as if i was using menu but using method provided by ViaoV
var me = this;
this.popUpWindow = Ext.create('Ext.window.Window', {
resizable: false,
closable: false,
constrainHeader: true,
title: 'Panel wyszukiwania',
iconCls: 'icon-magnifier',
border: false,
draggable: false,
items: [{
xtype: 'decision_quicksearch',
listeners: {
afterrender:function(me) {
Ext.getDoc().on('mousedown', function(o) {
console.log('mousedown');
if (!o.within(me.getEl())) {
me.parentComponent.toggle(false);
}
})
// me.getEl().on('blur', function() {
// console.log('blur');
// me.parentComponent.toggle(false);
// });
}
},
}]
});
this.tbar = [{
xtype:'tbfill'
}, {
xtype:'tbseparator'
}, {
xtype:'button',
text:'Wyszukiwanie',
iconCls:'icon-magnifier',
enableToggle:true,
menu: { },
listeners:{
afterrender:function() {
//register this btn to quicksearch panel so we can hide menu when search button is clicked
Ext.apply(me.popUpWindow, {
parentComponent:this
});
},
toggle: function(btn, pressed) {
if (pressed) me.popUpWindow.showAt(btn.getBox(false).x - 3, btn.getBox(false).y + btn.getBox(false).height);
else me.popUpWindow.hide();
}
}
}];
EDIT: After some testing the solution i ended up with is not a good one. I have comboboxes in my panel which are defined by boundlist as another dom, so when i pick item from cbox !o.within(me.getEl()) evaluates to true and hides my panel. I really need the functionality when the user clicks elsewhere the window hides.
I've implemented an EXTJS 4.0 tabpanel containing two grids.
This all runs fine when i first load it. But when i go to another panel( not a child of the tabpanel) and then reload the tabpanel in the viewport OR resize my browser window, the HTML child homeclients (my grid) dissappears ( and it's HTML element is removed from the tabpanel).
Anybody have any idea why this is happening ?
Tabpanel:
Ext.define('EY.view.center.home.container.Panel', {
extend: 'Ext.tab.Panel',
alias: 'widget.containerhome',
id: 'containerhome',
activeTab: 1,
border: false,
resizeTabs:true,
items: [{
title: 'Most Used clients',
iconCls: 'tabIcon',
xtype: 'mostUsedClients',
id: 'mostUsedClients',
scale: 'large'
},{
title: 'All Clients',
xtype: 'homeclients',
id: 'homeclients',
scale: 'large'
}
],
requires: [
'EY.view.center.home.client.Grid',
'EY.view.center.home.client.mostUsedClients.mostUsedClients'
],
initComponent: function () {
Ext.apply(this, {
})
this.callParent(arguments);
}
});
Grid:
Ext.define('EY.view.center.home.client.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.homeclients',
id: 'homeclients',
baseCls: 'homeclients',
//frame:true,
store: 'Clients', //Ext.data.StoreManager.lookup('serviceStore'),
contextMenu: undefined,
border: false,
//flex: 1,
padding: 3,
hideHeaders: true,
columns: [
{ header: 'CLIENTS', field: 'textfield', flex: 1 }
],
features: [
Ext.create('Ext.grid.feature.RowBody', {
getAdditionalData: function (data, rowIndex, rec, orig) {
var headerCt = this.view.headerCt;
var colspan = headerCt.getColumnCount();
return {
rowBody: createHtml(rec),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}),
{
ftype: 'rowwrap'
}
],
viewConfig: {
listeners: {
itemclick: function (list, index, target, record, event) {
if (event.target.id == 'grandAccess') {
var windowIsClosed = Ext.getCmp('ConfirmationWindow');
if (!windowIsClosed) {
var clientId = index.data.id;
var clientVat = index.data.rn;
eDocsUser.currentClientName = index.data.n;
eDocsUser.currentClientId = clientId;
eDocsUser.currentClientRegisterNummer = clientVat;
showGrantAccesWindow(index);
}
} else {
if (Ext.getCmp('ConfirmationWindow')) {
Ext.getCmp('ConfirmationWindow').hide();
}
loadDataOfSelectedClient(index);
}
}
}
},
initComponent: function () {
this.callParent(arguments);
}
});
We solved this by changing the grid to a dataview for the resizing problem (grids rly cause a lot of problems for me tbh).
And then we fixed the other problem by changing :
layout.setActiveItem(Ext.getCmp('containerhome'), {
type: 'slide',
direction: 'left',
duration: 5000
});
to
layout.setActiveItem(0);
We (but not me ... :D ) created a new item instead of calling the old one in the card panel.