PDA

View Full Version : using floating - my component just vanishes, even with absolute pos.



DaveC426913
25 Nov 2010, 8:10 AM
If I set floating = true, my component disappears from the screen.

I've added {position:absolute; top:0; left:0;} in my CSS, but the component is just nowhere to be found.

Since I can use position absolute to float my component over top of my page, what does floating=true accomplish above and beyond that? (But more importantly, how do I use it correctly?)




CONCIERGE.UI.Page.ShoppingList = Ext.extend(Ext.Panel, {
initComponent: function() {
theList = this;
var config = {
items:[{
xtype: 'CONCIERGE_UI_component_scrolllist',
id: 'myList',
},{
xtype: 'container',
id: 'ShoppingListButtonBar',
cls: 'ShoppingListButtonBar',
layout: 'hbox',
items: [{
xtype: 'button',
id: 'btnAdd',
html: 'add',
handler: this.btnAddtoShoppingList
},{
xtype: 'button',
id: 'btnInfo',
html: 'get',
handler: this.btnGetUserInfo
}]
},{
html: '!'
},{
xtype: 'CONCIERGE_UI_component_itemdetails',
cls: 'ItemDetails',
height: 500,
width: 800,
floating: true,
}]
}


CSS:


.ItemDetails{
border:20px solid red;
position:absolute;
top:0;
left:0;
}

evant
25 Nov 2010, 11:51 AM
1) You need to give it an x/y pos.
2) Why are you adding a floating component as a child of some other container?

DaveC426913
25 Nov 2010, 12:05 PM
1) You need to give it an x/y pos.
:Facepalm: Right. I was looking for top:0, left:0 config properties.



2) Why are you adding a floating component as a child of some other container?
Well, I'm struggling with how to architect this so, good question.

My app has a few main pages, operated by tabs. 'My Shopping List' page will have an 'Edit One Item' screen. The 'Edit One Item' screen will fill the same space as the 'Shopping List' screen, but the 'Shopping List' should remain in the background so that the list doesn't have to be loaded every time I go back to it.

So the idea is to float the 'Edit One Item' over top of it.

I originally had all these full-page screens as cards in the main container but that ran into problems too. How do I populate the 'Edit One Item' form with item data when I display it?

So, now I'm instantiating the 'Edit One Item' form page as-needed, so I can populate it right then and there.

And this is where I am right now:



Ext.setup({
onReady: function() {
var main = new Ext.Panel({
fullscreen: true,
id: 'main',
items:[{
xtype: 'Concierge_UI_page_shoppinglist', // 1 shopping list
id: 'ShoppingList',
}]
});


CONCIERGE.UI.Component.LineItem = Ext.extend(Ext.Container, {
initComponent: function() {
var config = {
flex: 1,
layout: 'hbox',
cls: 'lineitem',
itemUID: -1,
items: [{
xtype: 'button',
itemId: 'itemName',
text: '-',
cls: 'itemName',
handler: this.editItem,
},{
xtype: 'button',
handler: this.deleteItem
}]
}
Ext.apply(this, Ext.apply(this.initialConfig, config));
CONCIERGE.UI.Component.LineItem.superclass.initComponent.apply(this, arguments);

},

editItem: function(button,event){
Ext.getCmp("ShoppingList").add(CONCIERGE.UI.Component.ItemDetails);
},

evant
25 Nov 2010, 12:14 PM
You can have a container "manage" components without adding it to the items, so to speak:



MyClass = Ext.extend(Ext.Panel, {
initComponent: function(){
// create stuff
},

onSomeButtonClick: function(){
if (!this.editPanel) {
this.editPanel = new Ext.Panel(...);
}
this.editPanel.show();
}
});

DaveC426913
25 Nov 2010, 12:40 PM
You can have a container "manage" components without adding it to the items, so to speak:

Sorry, I don't really know what that means or how to apply it.

I'm trying to imitate what you did. Trying to add my own component, but CONCIERGE_UI_component_itemdetails is not defined.

editItem: function(button,event){
CONCIERGE.UI.Component.LineItem = Ext.extend(Ext.Container, {
...
editItem: function(button,event){
var ItemDetails = Ext.getCmp("pgShoppingList").editPanel = new CONCIERGE_UI_component_itemdetails;
ItemDetails.show();
},


OK, I'll try smaller steps.

this.editPanel = new Ext.Panel({items:[{html:'!!!',style:'border:10px solid red',height:100,width:100}]});
this.editPanel.show();


This is the same as your code. No joy.

DaveC426913
25 Nov 2010, 1:05 PM
OK, i'm trying to target the page, so I can either go relatively by ownerCt or direct reference. I've tried both methods below.



console.log(this.ownerCt.ownerCt.ownerCt.ownerCt.ownerCt)// gets me pgShoppingList
this.ownerCt.ownerCt.ownerCt.ownerCt.ownerCt.editPanel = new Ext.Panel({id:'foo',html:'!!!',layout:'absolute',x:0,y:0,style:'border:10px solid red',height:100,width:100});//CONCIERGE_UI_component_itemdetails;
this.ownerCt.ownerCt.ownerCt.ownerCt.ownerCt.editPanel.show();
this.ownerCt.ownerCt.ownerCt.ownerCt.ownerCt.doLayout();

//or

pgShoppingList = Ext.getCmp("pgShoppingList");
pgShoppingList.editPanel = new Ext.Panel({id:'foo',html:'!!!',layout:'absolute',x:0,y:0,style:'border:10px solid red',height:100,width:100});//CONCIERGE_UI_component_itemdetails;
pgShoppingList.editPanel.show();
pgShoppingList.doLayout();
console.log(pgShoppingList)

Either way that Panel does not display, and when I look at it in the console, it has not been added as an item to pgShoppingList.

DaveC426913
26 Nov 2010, 7:39 AM
OK, seem to have made a breakthrough.




pgShoppingList = Ext.getCmp("pgShoppingList");
var editPanel = new CONCIERGE.UI.Component.ItemDetails();
pgShoppingList.add(editPanel)
pgShoppingList.doLayout();


Without context, 'Uncaught TypeError: Cannot call method 'replace' of undefined'
is pretty useless as an error.

I tracked it down to this little oopsie:


CONCIERGE.UI.Component.ItemDetails = Ext.extend(Ext.Container, {
initComponent: function() {
var config = {
style: '10px solid red;',