How to update the panel after removing items in sencha - extjs

I am using sencha to update a panel as follows.
I will have a handler for a button.
In that i am removing a docked panel from a panel. and then adding the some new panel as a docked item.
But the contents of the panel are not appearing. They are appearing only when i change the size of the browser window, i.e., maximize it or restore it.
How can the problem be solved?
The code for the problem is as shown below.
handler: function(){
chaptersPanel.removeDocked(chaptersList[chaptersPanel.getStory()]);
chaptersPanel.insertDocked(0,chaptersList[this.no]);
chaptersPanel.setStory(this.no);
chaptersPanel.doLayout();
mainPanel.setActiveItem("chaptersPanel");
}

YOu need to do a doComponentLayout() sometimes. Sencha Touch is a little flakey about it. doLayout is supposed to handle the componentlayout, but it doesn't always

Related

resize ng-grid when window size changed with click event

I am using ng-grid when I drag the window the grid resize well. But when I click a button to make the window bigger,the grid does not resize.
UPDATE: Actually, the grid is resized. However, the row and column are not.
I notice in 3.x they have autoresize function. Unfortunately, I cannot update to 3.x version. Is there any way I can fix it?
$scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
$scope.gridOptions.$gridScope,
$scope.gridOptions.ngGrid
);
I used this code the rebuild the grid and it solve my problem.
Thanks for everyone's replay.

Vertical scroll-bar of extjs4-multiselect is not displaying?

I'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.

EXTJS: scrolling issue

When Data loads in grid and scrolling appears, I can navigate it through up/down arror key. But when the pointer goes down not able to see the content in grid, i mean the grid does not shift upword automatically.
Looks like your grid is not rendered properly. Judging by your description your grid is bigger then the panel it belongs to. Please post some code and screenshots.

Extjs grid header is draw on top of other controls

See the image above, the grid header is always on top.
Here's the image:
This images is like a Menu. When I click the first one, open the menu in horizontal line. WHen I click the second (from top to botton) open the menu for this ˜group˜.
This is an iconic menu.
For the first time, its only shown the first column of icons (in this case "bar" and "favorites", and the grid is displayed correctly.
But once the "bar" button is clicked, the rest of line appears, but the grid header is on top.
This appears to be an absolute layout problem.
I recommend not change extjs classes.
If you do that, will get problems in a future update.
I found that the problem is in the ext-all.css file.
the z-index property in the class:
.x-docked{
position:absolute!important;
z-index:1
}
seems to be the problem.
If I change to zero, it works.

extjs 4 scroilling WITHOUT a scrollbar

I have this narrow panel which is basically a list of thumbnails, and i need to be able to scroll over them using buttons.
We have a panel (anchor layout), with containers in it, and each container contains the image.
there isn't space for a scrollbar, and anyway we don't want one.
I thought it would be as easy as in the listener for my button calling panel.getEL().scroll('b',20)
but this isn't working because the scrollHeight === ClientHeight so scroll does nothing.
Is there a technique I am missing or should this work?
So you're using a button to scroll through the images? What about having the button's listener remove/hide the containers/images at the front of the panel to allow the others to use the space?

Resources