PDA

View Full Version : cls as a default and cls as parameter difference



Grum
27 Sep 2013, 2:42 AM
Hello. I'm working for 4 weeks now with Ext JS 3.4. I've got a question to a problem I am facing at the moment. It is about cls and dragging. I expected that when I drag a Portlet, it won't change its cls. But it does under certain circumstances.

Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame: true,
collapsible: true,
closable: false,
cls: 'x-portlet',
draggable: true,
[...]
}
x-Portlet is a default CSS class for my portlet. With the follwing creation of a portlet everything is fine:

new Ext.ux.Portlet({
stateId: 'startseite_offene_positionen',
title: GUI.leseLng('getaetigte_bestellungen'),
frame: true,
cls: 'x-portlet',
items:[grid_stats],
portalColumn: 0,
portalPosition: 1
}));
As you see, I make both. declare it as default and set it again when I use it. Now the problem: As soon as I delete the line and relie on the default value, the problem above appears:

new Ext.ux.Portlet({
stateId: 'startseite_offene_positionen',
title: GUI.leseLng('getaetigte_bestellungen'),
frame: true,
//cls: 'x-portlet',
items:[grid_stats],
portalColumn: 0,
portalPosition: 1
}));
Without dragging, both works. The CSS is there. But as soon as I begin to drag in the second version, the CSS seems to change - from the custom red design I made to the standard grey. I'm confused because it simply seems to base on how I declare cls - only as a default cls oder as a parameter in the creation with new. Do I make something wrong? Is it a bug? I am open to all kind of information about this issue

slemmon
30 Sep 2013, 2:49 PM
I take it this is done using the Portal example?
http://dev.sencha.com/deploy/ext-3.4.0/examples/portal/portal.html

I'm not seeing the x-portlet cls added/removed in the ux code when dragging and dropping or when I examine the DOM in the Chrome Dev Tools, but maybe I'm overlooking something?

If you're adding your own CSS class to a widget you might want to use something other than x-name since all of the Ext/Sencha created widgets use the x-namespace for the rules. Same recommendation applies to creating your own classes - use your own namespace instead of using the Ext namespace. I'm not sure if that's why you're seeing a collision/issue, but it will be advisable to make your own namespacing for CSS and extensions all the same.

Grum
30 Sep 2013, 10:03 PM
Thanks for your reply. I changed the namespace of my CSS Class, but the Problem still appears. I orientated myself on the named example, but I added something to make the portlets resizable:

Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame: true,
collapsible: true,
closable: false,
cls: 'e-portlet',
draggable: true,
[...],
initComponent: function(){
Ext.ux.Portlet.superclass.initComponent.call(this);
this.addEvents({
setportaldata: true
});
//Render
this.on('render', function(p){
this.loadMask = new Ext.LoadMask(this.getEl(), {msg:$('bitte_warten_text').value});
if(Ext.isDefined(p.savedHeight)){
p.height += p.getEl().getBorderWidth('tb');
}
p.minHeight = (p.minHeight>p.getFrameHeight())?p.minHeight:p.getFrameHeight();
if(p.resizable === true){
var resizer = new Ext.Resizable(p.getEl(), {
handles: 's',
pinned: true,
transparent: true,
minHeight: p.minHeight,
dynamic: true,
resizeElement: function() {
var box = this.proxy.getBox();
p.updateBox(box);
if (p.layout) {
p.doLayout();
}
p.findParentByType('portal').fireEvent('resized_portlet', p);
p.savedHeight = p.getHeight();
return box;
}
});
}
});
As far as I know, porlets should not resize nativly in 3.4, should they? So I added it on my own. The fired event to the portal calculates the new position of the portlet, if a scrollbar vanishes during the resizing. Maybe this leads the a collision in any way? I added some screenshots of my problem.
ok.jpg : All portlets look like this, as long as they remain undragged
drag.jpg: That the problem, they turn back to grey as soon as I drag them if I only use the default cls of a porlet
drag_ok.jpg: So it should be and happens, when I simply add the cls attribut again in the constructor

slemmon
1 Oct 2013, 1:11 PM
To help me get on the same page with you could you fork the following Fiddle?
https://fiddle.sencha.com/#fiddle/od

If you can fork it (hover over the buttons on the top of the left panel to find the fork button) and add your own code as well as your CSS (you can click on the + at the bottom and right click on <root> and add a local resource. Just call it my.css or something) it might help me / the community see exactly what you're doing in context.

Grum
1 Oct 2013, 11:10 PM
How nice, I did not know there is some kind of this. I tried some things within fiddle. I cannot implement my solution for the resizing by any reason, but it seems it has nothing to do with the problem anyway, beacause I encounter the problem again. Here is the fiddle, what the problem illustrates:
https://fiddle.sencha.com/#fiddle/ot
When you start to drop the portlet named 'Grid in a portlet' everything is fine - the design does not change. Start to drag and drop another porlet to see the the change to the normal design. I added comments in the code so I hope it is easier to find (Lines 247, 279 and 286).

willigogs
2 Oct 2013, 3:05 AM
When dragging and dropping, the actual component is hidden, and a new component is created during the drag operation.

This element has the class of x-panel-ghost applied - therefore if you were to style all your header components with this as the parent class, it should work.

e.g.


.x-panel-ghost .x-panel-tl,
.x-panel-ghost .x-panel-tr,
.x-panel-ghost .x-panel-tc,
.x-panel-ghost .x-panel-header {background:#f00 !Important;}

Grum
2 Oct 2013, 5:32 AM
Thanks a lot willigogs. This solved the problem very well. Now the portlets behave as I expected when I drag and drop them. Very helpful, thanks again.

But I still try to figure out, what it has to do with the fact, that I could have done it by define the cls over and over again for every porlet and having the same result without the new CSS Code. Is there in the depths of Ext js a routine for this kind of style that maybe makes its turn by the wrong time in the creation of the portlet? I do not know, but would be nice to know for a better knowledge.