PDA

View Full Version : Why is defaultDockWeights not applying to my components?



Nier
26 Apr 2016, 5:25 PM
Hi, I'm learning Ext JS these days with Ext JS in Action, 2nd Edition.

In the Panel section, it introduced a weight property, which seems can let programmer to control the priority of the rendering and sizing of the child components.

The book says the default weight should be {top: 1, left: 3, right: 5, bottom: 7}, and I checked it in docs, which also says:



Ext.panel.AbstractPanel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };


But when I'm trying to modify the weight property, the result of the layout is not as same as my expectation, so I tried to inspect the weight value of each component, and the default value is not the same as the value I described above, here the fiddle: https://fiddle.sencha.com/#fiddle/1997

In the case that the fiddle link may be broken, here the testing code:


const buttons = [
{ text: "Btn 1" },
{ text: "Btn 2" },
{ text: "Btn 3" }
];


const topDockedToolbar = {
id: "top",
xtype: "toolbar",
dock: "top",
items: buttons
};


const bottomDockedToolbar = {
id: "bottom",
xtype: "toolbar",
dock: "bottom",
items: buttons
};


const leftDockedToolbar = {
id: "left",
xtype: "toolbar",
vertical: true,
dock: "left",
items: buttons
};


const rightDockedToolbar = {
id: "right",
xtype: "toolbar",
vertical: true,
dock: "right",
items: buttons
};


const onReadyFunction = () => {
const myPanel = Ext.create("Ext.panel.Panel", {
id: "myPanel",
width: 350,
height: 250,
title: "Ext Panels rock!",
renderTo: Ext.getBody(),
html: "Content body",
buttons: {
id: "buttons",
items: buttons
},
dockedItems: [
leftDockedToolbar,
rightDockedToolbar,
topDockedToolbar,
bottomDockedToolbar,
]
});

Ext.getCmp("myPanel").getContentTarget().dom.innerHTML = `<pre style="display: inline;">${Ext.getCmp("myPanel").dockedItems.items.map((d) => `${d.weight}\t${d.id}\n`).join("")}</pre>`;
}


Ext.onReady(onReadyFunction);



The weight property of each component is:

-1 myPanel_header
0 left
0 right
0 top
0 bottom
0 buttons

Am I doing something wrong? I'm confused about the weight property now because the book doesn't seem to explain it very clearly.

jdkhamba
27 Apr 2016, 7:11 AM
Not an expert on the weight property but do you really need it? Exactly what are you trying to achieve? Based on your fiddle, I can tell that the same can be achieved without using weights at all.

Nier
27 Apr 2016, 5:06 PM
Not an expert on the weight property but do you really need it? Exactly what are you trying to achieve? Based on your fiddle, I can tell that the same can be achieved without using weights at all.

Thanks for the response. I'm not trying to achieve anything, just learning Ext JS. But weight seems to be an useful property because I can modify the layout by manipulate the weight value.

For example, I can make the layout looks like this by only changing the weight values:

https://fiddle.sencha.com/#fiddle/19e0

So I think knowing the default value is crucial because that matters what weight value should I give them without setting every value in each component. However, the default value is not as same as described in book nor the docs.