ExtJS question/problem

72 Posts

wiegers Reply #1, 13 years, 10 months ago

Hello Guys,

I have a problem with ExtJS and can't find it.
I want to create a new TV with multiple field, in total there will be 10 fields and i want to show then inside 2 columns.
I've set the anchor on 100% as you see, that doesn't work. If i set the width to 100% is doesn't work either.

Is there someone that can help me out here?

Any help is greatly appreciated.

Here is the code. Some panels have a border so you can see my problem.

newTv.panel.Home = function(config) { 
	config = config || {}; 
	Ext.apply(config,{ 
		border: false 
		,bodyStyle: 'border: 1px solid red;' 
		,baseCls: 'modx-formpanel' 
		,renderTo: 'tv'+config.tv+'-panel' 
		,items:[{ 
			xtype: 'panel' 
			,layout: 'column' 
			,anchor: '100%' 
			,bodyStyle: 'border: 1px solid blue;' 
			,items: [{ 
				xtype: 'panel' 
				,layout: 'form'
				,columnWidth: .5 
				,bodyStyle: 'border: 1px solid green;' 
				,items: [{ 
					xtype: 'textfield' 
				}] 
			},{ 
				xtype: 'panel' 
				,layout: 'form'
				,columnWidth: .5 
				,bodyStyle: 'border: 1px solid green;' 
				,items: [{ 
					xtype: 'textfield' 
				}] 
			}] 
		}] 
	});

	newTv.panel.Home.superclass.constructor.call(this,config); 
}; 
Ext.extend(newTv.panel.Home,MODx.Panel); 
Ext.reg('newtv-panel',newTv.panel.Home);

This question has been answered by multiple community members. See the first response.

☆ A M B ☆
3,112 Posts

goldsky Reply #2, 13 years, 9 months ago

a new TV?
Have you tried migx ?

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

72 Posts

wiegers Reply #3, 13 years, 9 months ago

It's gonna be totally different from MIGX.
I have the TV ready but the only thing that i want is the full width.
If i look at MIGX they have the width set on 600px, maybe because the same issue?

☆ A M B ☆
3,112 Posts

goldsky Reply #4, 13 years, 9 months ago

I believe you need to getComponent('the_container').getWidth() to get the fixed width.

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

72 Posts

wiegers Reply #5, 13 years, 9 months ago

But if i get the max width there is still the problem with resizing your browser.
If i have a Ext.Panel inside a CMP i can set the anchor to 100% and it resizes when you resizing your browser.
If i have the width for example 1536px and i set the width to that. When i resize the width still being the same.

149 Posts

danya_postfactum Reply #6, 13 years, 9 months ago

Maybe tv container has layout different from 'anchor'. Your newTv.panel.Home should also has layout: 'anchor'. It seems that renderTo breaks such things as anchoring.

☆ A M B ☆
3,112 Posts

goldsky Reply #7, 13 years, 9 months ago

Quote from: wiegers at Dec 06, 2012, 04:11 AM

But if i get the max width there is still the problem with resizing your browser.
If i have a Ext.Panel inside a CMP i can set the anchor to 100% and it resizes when you resizing your browser.
If i have the width for example 1536px and i set the width to that. When i resize the width still being the same.

try this:

/* fix layout when MODX's left bar is collapsed/expanded */
var modxLeftBar = Ext.getCmp('modx-leftbar-tabs');
var myCustomTv = Ext.getCmp('my-custom-tv-name');
if (modxLeftBar) {
    modxLeftBar.on('collapse', function(){
        myCustomTv.doLayout();
    });
    modxLeftBar.on('expand', function(){
        myCustomTv.doLayout();
    });
    modxLeftBar.on('afterlayout', function(){
        myCustomTv.doLayout();
    });
}

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

72 Posts

wiegers Reply #8, 13 years, 9 months ago

Quote from: danya_postfactum at Dec 08, 2012, 02:23 AM

Maybe tv container has layout different from 'anchor'. Your newTv.panel.Home should also has layout: 'anchor'. It seems that renderTo breaks such things as anchoring.

Unfortunately this didn't work. The rendering worked better with layout: 'anchor' but the width where set on 358px instead of the max width.
I've added a screenshot of it so you could see my problem.

Quote from: goldsky at Dec 08, 2012, 09:54 PM

Quote from: wiegers at Dec 06, 2012, 04:11 AM
But if i get the max width there is still the problem with resizing your browser.
If i have a Ext.Panel inside a CMP i can set the anchor to 100% and it resizes when you resizing your browser.
If i have the width for example 1536px and i set the width to that. When i resize the width still being the same.

try this:
/* fix layout when MODX's left bar is collapsed/expanded */
var modxLeftBar = Ext.getCmp('modx-leftbar-tabs');
var myCustomTv = Ext.getCmp('my-custom-tv-name');
if (modxLeftBar) {
    modxLeftBar.on('collapse', function(){
        myCustomTv.doLayout();
    });
    modxLeftBar.on('expand', function(){
        myCustomTv.doLayout();
    });
    modxLeftBar.on('afterlayout', function(){
        myCustomTv.doLayout();
    });
}

I ment with resizing my browser as the actual browser (Chrome, Firefox).
This is a fix for hiding and showing the resource tree on the left.

☆ A M B ☆
183 Posts

lokamaya Reply #9, 13 years, 9 months ago

Sometime change xtype of parent to 'container' or 'fieldset' solve the problem. Or add another parent

xtype:'container'
,layout:'fit'
,style: 'position:relative !important;'

If it did not solve the problem, change the parent's layout to 'hbox'.

layout: 'hbox'
//or 
layout: { type: 'hbox', align: 'stretch' }

It's all about style or css, and your tv was overridden by the upper layout. Using firefox with WebDeveloper addon should help to get the generated html source.

zaenal.lokamaya

discuss.answer

72 Posts

wiegers Reply #10, 13 years, 9 months ago

Quote from: lokamaya at Dec 10, 2012, 08:55 PM

Sometime change xtype of parent to 'container' or 'fieldset' solve the problem. Or add another parent
xtype:'container'
,layout:'fit'
,style: 'position:relative !important;'
If it did not solve the problem, change the parent's layout to 'hbox'.
layout: 'hbox'
//or 
layout: { type: 'hbox', align: 'stretch' }
It's all about style or css, and your tv was overridden by the upper layout. Using firefox with WebDeveloper addon should help to get the generated html source.

Both solutions didn't work either. Do you've got another solution?
Maybe i'm doing something wrong?

Answered ExtJS question/problem