PDA

View Full Version : adding a Panel after the fact Not rendering added panels



dnensel
22 Apr 2008, 12:59 PM
I am having a problem adding panels with the panel.add() function.

I have created a border layout with 3 panels inside (top, center, bottom). I then want to go off and get some data and proceed to populate the top and bottom panels with small panels. I have inspected the DOM with firebug and my added panels are in the Items list however they never show up on the screen. any help would be great.
thanks


Ext.Container.LAYOUTS['carousel'] = Ext.layout.CarouselLayout;


ponyFlow = function(config)
{
this.Center = new Ext.Panel
({
id:'Center'
,region:'center'
// ,height:300
// ,title: false
,layout: 'ux.center'
,items:
[new Ext.Panel
({
title: "Middle Panel",
width: 150,
autoHeight: true,
html: "<img src='images/pony2.jpg' height= 90 width = 90>",
draggable: false

})
]


});
this.Parents = new Ext.Panel
({
id:'parents'
,region:'north'
,height:175
,title: "Parents"
// ,html: "hello"
,layout: 'carousel'


});
this.Children = new Ext.Panel
({
id:'children'
,region:'south'
,height:175
,title: "Children"
// ,html: "hello"
,layout: 'carousel'
,items: new Ext.Panel
({
title: "first",
style: {
margin: '5px 5px 5px 0px'
},
html: "<img src='images/pony2.jpg' height= 90 width = 90>",
draggable: true,
bbar:new Ext.Toolbar
({

items:
[
{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_edit.png'
},{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_break.png'
}

]
})
})

});


ponyFlow.superclass.constructor.call
(
this,
{
width: '800',
title: 'Pony Flow',
height: 600,
layout: 'border',
items: [this.Center, this.Parents]
}
);

// loadeing up Stables for demo. will be replaced with more meaningful function that hits DB
for(i=0; i<20; i++)
{
this.Parents.add
(
new Ext.Panel
({
title: "Pony "+i,
style: {
margin: '5px 5px 5px 0px'
},
html: "<img src='images/pony.png' height= 90>",
draggable: true,
bbar: new Ext.Toolbar
({

items:
[
{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_edit.png'
},{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_break.png'
}

]
})

})
)
}


this.loadChildren();
this.add(this.Children);
this.doLayout();
};


Ext.ux.ponyFlow = Ext.extend(ponyFlow, Ext.Panel,
{
load:function(kins)
{
iKins = kins;

clearChildren();
clearParents();

loadMidPanel(iKins);
loadChildren(iKins);
loadParents(iKins);
}

,getMidPanel:function(kins)
{

}

,loadChildren:function(kins)
{
Ext.Ajax.request //used to get subtable data from database and then pass it on to be loaded into fieldpanel
({
url:'gridTest.jsp',
params:{kins:this.KINS},
scope: this, //declare the scope for all call backs (i.e. success, failure, callback) !IMPORTANT!
success: this.fillChildren
})
}
,fillChildren: function(result, request)
{
childrenList = Ext.decode(result.responseText).Ponies;
for(pony=0; pony<childrenList.length; pony++ )
{
this.Children.add
(
new Ext.Panel
({
title: childrenList[pony].name,
style: {
margin: '5px 5px 5px 0px'
},
html: "<img src='images/pony2.jpg' height= 90 width = 90>",
draggable: true,
bbar:new Ext.Toolbar
({

items:
[
{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_edit.png'
},{
cls : "x-btn-icon",
icon: './js/extjs/resources/icons/link_break.png'
}

]
})
})
);
this.Children.doLayout();
}
}
,loadParents:function(kins)
{

}

,clearChildren:function()
{
this.Children.items.clear();
}

,clearParents:function()
{
this.Parents.items.clear()
}


,loadDetails: function() //loads current values from database
{
this.fp.load({url:'company-feedId.doIt',params:{feedId: this.feedId, kins:this.KINS},waitMsg:'Loading'});
Ext.Ajax.request //used to get subtable data from database and then pass it on to be loaded into fieldpanel
({
url:'companyDetailsClassifications.doIt',
params:
{
feedId: this.feedId,
kins:this.KINS
},
scope: this, //declare the scope for all call backs (i.e. success, failure, callback) !IMPORTANT!
success: this.loadClassifications
})
}
,loadClassifications: function(result, request) //where the magic happens for subtable fieldset value loading
{
this.fp.getForm().setValues(Ext.decode(result.responseText).classifications);
//decodes a JSON object from the result passed by the AJAX request. and then sets the corresponding values
}

});

dnensel
2 May 2008, 11:58 AM
Just wondering if anybody can even point me in the right direction here. I am positive it is a problem with he rendering and how/ what order that gets done but the documentation for that is very vague.

Animal
3 May 2008, 2:27 AM
layout:'carousel'?

What layout class are you using? That's where the problem is. It's the layout that actually manages rendering, laying out, and sizing of a Panel's content.

There were a few bugs I noticed in my CarouselLayout class which I just fixed recently. It could not handle being initialized with no initial items setting. The zero values encountered in that situtation blew it up.

Here is the versi nI have that works for me:



var o = Ext.Container.prototype.lookupComponent;
Ext.override(Ext.Container, {

// Override of our container's method to allow raw Elements to be added.
// This is called in the context of the container.
lookupComponent: function(comp) {
if (comp instanceof Ext.Element) {
return comp;
} else if (comp.nodeType && (comp.nodeType == 1)) {
return Ext.get(comp);
} else {
return o.call(this, comp);
}
}
});

Ext.layout.CarouselLayout = Ext.extend(Ext.layout.ContainerLayout, {
constructor: function(config) {
config = config || {};

// Non-chunked, then animation makes no sense.
if (!(config.chunkedScroll || config.pagedScroll)) {
Ext.applyIf(config, {
scrollIncrement: 10,
scrollRepeatInterval: 10,
animScroll: false
});
}
Ext.layout.CarouselLayout.superclass.constructor.call(this, config);

// Set up animation config depending upon animation requirements.
if (this.chunkedScroll || this.pagedScroll) {
this.scrollRepeatInterval = this.scrollDuration * 1000;
this.scrollAnimationConfig = {
duration: this.chunkedScroll ? this.scrollDuration : this.scrollDuration * 2,
callback: this.updateScrollButtons,
scope: this
}
} else {
this.scrollAnimationConfig = this.animScroll ? {
duration: this.scrollDuration,
callback: this.updateScrollButtons,
scope: this
} : false;
}
},

/**
* @cfg scrollElementTag {String} The tag name of the carousel item container. If each item's main Element
* is an &lt;LI> then this could be specified as '&lt;UL>. Defaults to '&lt;DIV>'.
/**
* @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed (defaults
* to 10, or if {@link #resizeTabs} = true, the calculated tab width).
*/
scrollIncrement : 10,
/**
* @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a scroll button is
* continuously pressed (defaults to 10).
*/
scrollRepeatInterval : 10,
/**
* @cfg {Float} scrollDuration The number of seconds that each scroll animation should last (defaults to .35).
* Only applies when {@link #animScroll} = true.
*/
scrollDuration : .35,
/**
* @cfg {Boolean} animScroll True to animate item scrolling so that hidden items slide smoothly into view (defaults
* to true).
*/
animScroll : true,
/**
* @cfg {Boolean} chunkedScroll True to animate item scrolling so that the carousel scrolls the whole of the next
* item in from the side you are scrolling towards.
*/
chunkedScroll: false,
/**
* @cfg {Boolean} pagedScroll True to animate item scrolling so that the carousel scrolls a full page of
* items in from the side you are scrolling towards.
*/
pagedScroll: false,

// private
monitorResize: true,

/**
* @cfg {String} scrollButtonPosition 'left', 'right' or 'split'. Position of the scroll arrow buttons.
*/
scrollButtonPosition: 'right',

// private
onLayout : function(ct, target){
var e = ct.getEl();
e.setStyle({
'padding-left': '0px'
});
if (e.dom.tagName.toLowerCase() == 'fieldset') {
var l = e.child('legend');
if (l) l.setStyle('margin-left', '10px');
}
var cs = ct.items.items, len = cs.length, c, i;

if(!this.scrollWrap){
this.scrollWrap = target.createChild({
cls: 'x-carousel-layout',
cn: [
{
tag: this.scrollElementTag || 'div',
cls: 'x-carousel-scroller',
cn: {
cls: 'x-carousel-body'
}
}, {
cls: 'x-carousel-left-scrollbutton',
style: {
height: '100%'
}
}, {
cls: 'x-carousel-right-scrollbutton',
style: {
height: '100%'
}
}]
});

// Add the class that defines element positions
this.scrollWrap.addClass('x-scroll-button-position-' + this.scrollButtonPosition);

this.scrollLeft = this.scrollWrap.child('.x-carousel-left-scrollbutton');
this.scrollRight = this.scrollWrap.child('.x-carousel-right-scrollbutton');
this.scroller = this.scrollWrap.child('.x-carousel-scroller');
this.strip = this.scroller.child('.x-carousel-body');

if (this.pagedScroll) {
this.scrollLeft.on('click',this.onScrollLeftClick, this);
this.scrollRight.on('click',this.onScrollRightClick, this);
} else {
this.leftRepeater = new Ext.util.ClickRepeater(this.scrollLeft, {
interval : this.pagedScroll ? 10000 : this.scrollRepeatInterval,
delay: 0,
handler: this.onScrollLeftClick,
scope: this
});
this.rightRepeater = new Ext.util.ClickRepeater(this.scrollRight, {
interval : this.pagedScroll ? 10000 : this.scrollRepeatInterval,
delay: 0,
handler: this.onScrollRightClick,
scope: this
});
}
this.renderAll(ct, this.strip);
} else {
this.renderAll(ct, this.strip);
}
this.scroller.setWidth(this.container.getLayoutTarget().getWidth() - (this.scrollLeft.getWidth() + this.scrollRight.getWidth() + 12));
this.updateScrollButtons.defer(10, this);
},

// private
renderItem : function(c, position, target){
if(c) {
if (c.initialConfig) {
if (c.rendered){
if(typeof position == 'number'){
position = target.dom.childNodes[position];
}
target.dom.insertBefore(c.getEl().dom, position || null);
} else {
c.render(target, position);
}
} else if (c instanceof Ext.Element) {
c.el = c;
if(typeof position == 'number'){
position = target.dom.childNodes[position];
}
target.dom.insertBefore(c.dom, position || null);
}
}
c.el.addClass('x-carousel-item');
},

// private
onResize : function(c, position, target){
Ext.layout.CarouselLayout.superclass.onResize.apply(this, arguments);

// Quit if we are empty
if (!this.container.items.items.length) return;

this.scroller.setWidth(this.container.getLayoutTarget().getWidth() - (this.scrollLeft.getWidth() + this.scrollRight.getWidth() + 12));
if (Ext.isIE) {
this.scrollLeft.setHeight(this.scroller.getHeight());
this.scrollRight.setHeight(this.scroller.getHeight());
}
this.setItemsEdges();

// If width increase has introduced spare space to the right, close it up.
var r = this.getMaxScrollPos();
if (this.getScrollPos() > r) {
this.scroller.scrollTo('left', r);
}
},

setItemsEdges: function() {
// Register strip-relative left/right edges for easy chunked scrolling
var t = this.container.items.items;
var lt = t.length;

// Quit if we are empty
if (!lt) return;

var stripLeft = this.strip.getLeft();
for (var i = 0; i < lt; i++) {
var c = t[i];
var e = c.el;
if (!e) continue;
var b = e.getBox();
var l = b.x - stripLeft;
var r = b.right - stripLeft;

// "left" is the leftmost visible pixel.
// "leftAnchor" is the postition to scroll to to bring the
// item correctly into view with half the inter-item gap visible.
// Same principle applies to "right"
c.edges = {
left: l,
leftAnchor: l,
right: r,
rightAnchor: r
};

// Adjust anchors to be halfway between items.
if (i == 0) {
e.setStyle({'margin-left': '0px'});
} else {
if (i == t.length - 1) {
e.setStyle({'margin-right': '0px'});
} else {
e.setStyle({'margin-right': ''});
}
var prev = t[i - 1];
var halfGap = ((l - prev.edges.right) / 2);
prev.edges.rightAnchor += halfGap;
c.edges.leftAnchor -= halfGap;
}
}

// Work out average item width if we have rendered items
if (t[0].edges) {
this.itemWidth = t[lt - 1].edges.rightAnchor / lt;
}
},

/**
* Return the next item to the left which is not fully visible.
* Returns undefined if none available,
*/
getNextOnLeft: function() {
var t = this.container.items.items;
if (t.length) {
for (var i = t.length - 1; i > -1; i--) {
if (t[i].edges.left < this.getScrollPos()) {
return t[i];
}
}
}
},

/**
* Return the next item to the right which is not fully visible.
* Returns undefined if none available,
*/
getNextOnRight: function() {
var t = this.container.items.items;
if (t.length) {
var scrollRight = this.scroller.dom.scrollLeft + this.getClientWidth();
for (var i = 0, l = t.length; i < l; i++) {
if (t[i].edges.right > scrollRight) {
return t[i];
}
}
}
},

/**
* Called when a click event is fired by the right scroll button.
* May also be used to programatically trigger a right scroll event.
*/
onScrollRightClick : function(){
var s = this.getScrollTo(1);
if (s) {
s = Math.min(this.getMaxScrollPos(), s);
if(s != this.getScrollPos()) {
this.scrollTo(s);
}
}
},

/**
* Called when a click event is fired by the left scroll button.
* May also be used to programatically trigger a left scroll event.
*/
onScrollLeftClick : function(){
var s = Math.max(0, this.getScrollTo(-1));
if(s != this.getScrollPos()) {
this.scrollTo(s);
}
},

// private
scrollTo : function(pos){

// Calculate scroll duration based on how far we have to scroll.
if (this.scrollAnimationConfig) {
var distance = Math.abs(this.getScrollPos() - pos);
this.scrollAnimationConfig.duration = this.scrollDuration * (distance / this.itemWidth);
}

this.scroller.scrollTo('left', pos, this.scrollAnimationConfig);

// Scroll animation will have called this in its callback.
if(!this.scrollAnimationConfig){
this.updateScrollButtons();
}
},

// private
updateScrollButtons : function(){
if (!this.container.items.items.length) return;
var pos = this.getScrollPos();
this.scrollLeft[(pos == 0) ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
this.scrollRight[(pos >= this.getMaxScrollPos()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
},

getScrollWidth : function(){
var t = this.container.items.items;
if (!t[t.length - 1].edges) {
this.setItemsEdges();
}
return (t.length && t[t.length - 1].edges) ? t[t.length - 1].edges.rightAnchor : 0;
},

// private
getScrollPos : function(){
return this.scroller.dom.scrollLeft || 0;
},

getMaxScrollPos: function() {
if (!this.container.items.items.length) {
return 0;
}
return this.getScrollWidth() - this.getClientWidth();
},

// private
getClientWidth : function(){
return this.scroller.dom.clientWidth || 0;
},

// private
getScrollTo : function(dir){
var pos = this.getScrollPos();

if (this.chunkedScroll || this.pagedScroll) {
// -1 for left, 1 for right
if (dir == -1) {
var nextLeft = this.getNextOnLeft();
if (nextLeft) {
if (this.pagedScroll) {
return nextLeft.edges.rightAnchor - this.getClientWidth();
} else {
return nextLeft.edges.leftAnchor;
}
}
} else {
var nextRight = this.getNextOnRight();
if (nextRight) {
if (this.pagedScroll) {
return nextRight.edges.leftAnchor;
} else {
return (nextRight.edges.rightAnchor - this.getClientWidth());
}
}
}
} else {
return (dir == -1) ? pos - this.scrollIncrement : pos + this.scrollIncrement;
}
},

// private
isValidParent : function(c, target){
return true;
}

});

Ext.Container.LAYOUTS['carousel'] = Ext.layout.CarouselLayout;