I have a extjs panel rendered inside a div like this:
panel = new Ext.Panel({
layout : 'fit',
renderTo: 'my_div',
monitorResize: true, // relay on browser resize
height: 500,
autoWidth: true,
items : [
centerPanel
],
plain : true
});
After the page has loaded the panel is empty, but when I resize the browser the contents appears by magic!
I think the data has not finished loading when the panel is rendered the first time.
How can I get the contents to show without resizing the browser?
I suspect the issue is that you need to explicitly cause the panel to be rendered. After creating the panel, make the following call:
panel.doLayout();
Sencha documentation says "A call to this function is required after adding a new component to an already rendered container, or possibly after changing sizing/position properties of child components."
Any reason why you're nesting a panel within a panel? Seems like centerPanel could be directly rendered to your containing div. Also, the issue is most likely how you have centerPanel configured, or how you're loading it, neither of which you're showing here. You should not need to call doLayout() manually in this case, it's probably an issue with how your components are configured.
bmoeskau is right, also my guess is you have an async server request that loads your data (store.load, ajax, etc) -you could call the layout after that store loads by regestering a callback function (see sencha docs)
tedder suggestion helped me, but in itself did not solve a similar problem I had: adding one Ext.draw.Component I got a blank panel.
The curious part is, the panel looked white, but the DOM components were all there and I could inspect them using e.g. Chrome developer tools.
I got it working by using a workaround. I added those 2 instructions after the call to this.add(component):
this.setVisible(false);
this.setVisible(true);
Hiding the panel and then making it visible again, in some obscure way, does the job.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I'm using ExtJS 4.2.1 to add customizations to a web site over which I have no design control. You could consider this to be like adding ExtJS components to another page as a mashup.
The problem is that when ExtJS starts up it adds CSS classes, such as x-body, to the <body> element of the DOM and this affects everything else on the page. I need to be able to stop it doing this while still allowing it to take effect on the ExtJS containers.
I know that I can use an IFrame to contain my ExtJS customization and isolate it from the page's DOM, but I found problems with performance with IFrames, and even rendering problems in Firefox and IE so need a different solution.
In ExtJS 4.0.2 if you set scopeResetCSS:true the magic happens, but in ExtJS 4.2.1 I can't found the option.
I guess you have a couple ugly options:
Remove the styles from ExtJS stylesheet (a long and boring work)
Use Ext.Element and removeClass function to manually remove the class from each element http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls
Upon further research, prompted by Aguardientico's answer, I found that is is possible to do this using Sass as described here however I didn't want to rebuild the ExtJS CSS so I added some code to do it at runtime as follows:
var body = Ext.getBody();
// Remove the x-body cls from the body element
body.removeCls("x-body");
// Add x-body cls to any existing top-level ExtJs divs
body.select('>div').each(function(el) {
if (el.hasCls("x-border-box")) {
el.addCls("x-body");
}
});
body.on("DOMNodeInserted", function(e, node) {
// Add x-body cls to top-level ExtJs divs as they are created
if (node.parentNode === body.dom) {
if (Ext.fly(node).hasCls("x-border-box")) {
Ext.fly(node).addCls("x-body");
}
}
});
The idea is to remove x-body from the body element and add it back to any divs created by ExtJS as immediate children of the body. Because ExtJS adds new divs as required, e.g. for pick lists, it is also necessary to watch for them being created using the DOMNodeInserted event.
I call this code in my application's launch handler, but it could alternatively be at the start of the Ext.onReady handler.
Edit:
My ExtJS application is in a container that is rendered to the body element like this:
Ext.create("Ext.container.Container", {
renderTo: Ext.getBody(),
...
});
but if you render to another DIV you will also need to add the x-body class to your custom container explicitly like this:
Ext.create("Ext.container.Container", {
renderTo: "SomeOtherDiv",
cls: "x-body",
...
});
The right option in ExtJS 6+ (classic) is Ext.scopeCss
Set this to true before onReady to prevent any styling from being added to the body element. By default a few styles such as font-family, and color are added to the body element via a "x-body" class. When this is set to true the "x-body" class is not added to the body element, but is added to the elements of root-level containers instead.
I have an amchart in a div whose show/hide is managed by angularjs. Sometimes it charts data that's already in memory. When that is the case, the div opens, chart is rendered and the SVG in there has a width of 10. As a result the chart does not appear on screen. Resize the window a mite and the chart appears because amcharts is listening to resize events I guess. This I think is a known issue - I have seen some SO posts on them and I hope one of them will work for me. My suspicion is that the angular machine does not get cycles to run open the div before amcharts gets to draw its magic (just a hunch no solid evidence.)
Next, I added an event watcher
piechart.write(divs.chart_div.attr('id'));
divs.chart_div.on('yes', 'snowy', function(){ // same with 'shown','resize'
console.info('============= woah ========');
});
Now a strange thing happened. I see the following error stack in my console
Error: [jqLite:onargs] jqLite#on() does not support the `selector` or `eventData` parameters http://errors.angularjs.org/1.3.13/jqLite/onargs
at REGEX_STRING_REGEXP (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8762:12)
at jqLiteOn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11733:39)
at Object.JQLite.(anonymous function) (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11951:17)
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
at obj.controller.$scope.myExt.renderFunc (http://localhost:8100/directives/boxRenderers2.js:179:24)
at _render_it (http://localhost:8100/modules/dashboard/dashboard.js:246:30)
at $scope.showBox.deferred.promise.then.workarea.showChild (http://localhost:8100/modules/dashboard/dashboard.js:310:17)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21888:27)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21904:27
at Scope.$get.Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:28)
And that funky behavior is gone ! The chart appears if I click to redraw it out of cached data, hides when click again, and all good. No more bland background colored div to stare at!!.
However, if I change the watch to divs.chart_div.on('shown', function(){ then the event handler is not called and the chart does not appear when rendered out of cached data.
I wonder what's going on.
Looks like something (might be the armchart library?) is expecting jQuery to be available to bind to an event. Angular comes with jqLite, a stripped down version of jQuery so that's why you're getting that exception.
I'm guessing it's something here on this line.
at Object.makePieChart (http://localhost:8100/common/services/graphinghelperService.js:528:34)
Use the full version of jQuery instead to take care of that problem: http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.
I am migrating an application from ExtJS 3.x to v4 and have been having some troubles with the TabPanel's now that the "autoHeight" property has been removed. I know that if you do not explicitly define a height for the panel it is assumed to be "auto height", but that is only true to a degree.
In ExtJS4, a tab panel with no height set will still have inline css height values set on the tab panel's containing divs, and those heights are calculated from the initial height of each tab item's content. And yes, if you update the height of any child components of the tab items, the height of the tab will be recalculated to fit it, or if the tab contains raw HTML and the tab's update() method is used to change that content, its height again, will be adjusted to fit.
Where the issue is, in my application anyway, is that I update the raw HTML content of those tab's using methods other than those in ExtJS's framework, such as jQuery.html(). Since the tab panel is not being notified of this change to the content, it does not recalculate the height value of the tab.
To get around this all I want to do is ensure that the tab panel's containing elements always are set to height:auto when rendered, re-rendered, or anything else. I'm assuming to accomplish this I would need to extend the TabPanel, but i don not know where to start as far as what methods to override, ect. Any thoughts?
This is what I ended up doing. It's definitely not ideal, pretty hacky but it seems to work ok. Maybe someone will better see what I'm try to accomplish now, and can come up with a better implementation :-)
Ext.define('Ext.tab.AutoHeightPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.autoheighttabs',
constructor: function(cnfg){
this.callParent(arguments);
this.initConfig(cnfg);
this.on('afterlayout', this.forceAutoHeight, this);
this.on('afterrender', this.forceAutoHeight, this);
this.on('resize', this.forceAutoHeight, this);
},
forceAutoHeight: function(){
this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
this.items.each(function(item, idx, len) {
if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
});
}
});
You may want to add a 'margin-bottom' value to the style config of your tab panel to prevent content from butting up against the bottom of the panel.
The catchy part is making ExtJS aware that the component is updated. You need to basically, recalculate the component layout. You can use the method doLayout( ) available with the Panel class. By calling this, you are forcefully asking to the layout to be recalculated and refreshed. I think this should help you out.