Ext: TabPanel e store.load

This message was edited 1 time. Last update was at 11/11/2010 10:42:41

Olá pessoal!

Eu tenho um TabPanel com algums Panels (obrigatoriamente com atributos "layout : absolute") que carrega os componentes dinamicamente atravez do load de um store:

TabPanel é mostrado abaixo como "form_usuarios_edit.items.get(0)"
e o painel que é populado dinamicamente é o "myCheckboxGroup.items.get(0)"

desta forma eu consigo capturar qualquer componente que tenha o atributo dirty=true, só que isto não está dando um efeito visual muito legal.
O Loop ativa cada painel da tab, um de cada vez, fazendo com que os componentes aparecam rapidamente todos ao mesmo tempo efinalmente parando no primeiro Panel.

se eu não coloco o loop como tentei acima, sou obrigado a clicar de aba em aba para que o handler do botão consiga pegar todos os campos sujos.

Existe alguma outra forma de "dizer" ao Ext que existem campos nas tabs sem precisar de passar por este loop gambiarra?
Eu queria utilizar o FormPanel, mas ele parece não aceita o layout absolute. Alguem tem ideia de como resolver isso?

Oi Luiz,

Rapaz, ta na hora de começar a organizar melhor as coisas hein? Pq vc ta fazendo myCheckboxGroup.items.get(0)? Que feio!
Dê um id aos componentes e use Ext.getCmp( "idComponente" ).

Quanto às abas, até onde eu sei, realmente vc precisa ativar uma a uma para que os componentes sejam carregados.
Acho que o layout do FormPanel não pode ser alterado, justamente por ser o layout form.

Você pesquisou na documentaçãoi suas dúvidas?

[]´s

Java Ninja Membro desde: 20/02/2005 21:56:17 Mensagens: 256 Offline

Luiz Augusto Prado wrote:Olá pessoal!
Existe alguma outra forma de "dizer" ao Ext que existem campos nas tabs sem precisar de passar por este loop gambiarra?

Utilize o atributo deferredRender: false, no componente TabPanel, isto fará com que todos os componentes sejam "renderizados" mesmo os que estiverem em tabs não visíveis

This message was edited 1 time. Last update was at 11/11/2010 13:39:26

Oi bombbr,
Vc sabe dizer desde quando é possível usar essa propriedade no config object do construtor do TabPanel?
Lembro que precisava disso ano passado e tive que fazer a a gambiarra de ativar aba por aba

Não tinha achado isso na documentação!

Muito bom saber

[]´s

Java Ninja Membro desde: 20/02/2005 21:56:17 Mensagens: 256 Offline

davidbuzatto wrote:Oi bombbr,
Vc sabe dizer desde quando é possível usar essa propriedade no config object do construtor do TabPanel?

Não sei exatamente mas na versão 2.X esta propriedade já existia.

deferredRender : Boolean
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.

The deferredRender property is internally passed to the layout manager for TabPanels (Ext.layout.CardLayout) as its Ext.layout.CardLayout.deferredRender configuration value.

Note: leaving deferredRender as true means that the content within an unactivated tab will not be available. For example, this means that if the TabPanel is within a form, then until a tab is activated, any Fields within unactivated tabs will not be rendered, and will therefore not be submitted and will not be available to either getValues or setValues.

bombbr wrote:

davidbuzatto wrote:Oi bombbr,
Vc sabe dizer desde quando é possível usar essa propriedade no config object do construtor do TabPanel?

Não sei exatamente mas na versão 2.X esta propriedade já existia.

Jura? Rapaz, e eu fazendo essa gambi! Que vergonha!
Vou arrumar

Obrigado!

bombbr wrote:

Utilize o atributo deferredRender: false, no componente TabPanel, isto fará com que todos os componentes sejam "renderizados" mesmo os que estiverem em tabs não visíveis

Show! Muitissimo obrigado bombbr! Funcionou perfeitamente.

davidbuzatto wrote:

Rapaz, ta na hora de começar a organizar melhor as coisas hein? Pq vc ta fazendo myCheckboxGroup.items.get(0)? Que feio!
Dê um id aos componentes e use Ext.getCmp( "idComponente" ).

Porque no caso em que estava trabalhando eu tinha que fazer um 'for' para capturar os componentes em myCheckboxGroup.

davidbuzatto wrote:

Acho que o layout do FormPanel não pode ser alterado, justamente por ser o layout form.

Acho que o código abaixo também lhe pode ser util.
Eu fiquei um tempão procurando isso e não encontrei nada semelhante no Sencha.
Eu estava fazendo codigo desnecessario porque da primeira vez que tentei utilizar o FormPanel não consegui faze-lo funcionar.
Sim amigos! É possivel Ext.form.FormPanel com layout absolute. Mas desta forma:

var win = new Ext.form.FormPanel({
		title: 'Ext.form.FormPanel with layout absolute',
                labelAlign: 'top',
                frame:true,
                layout:'fit',                  
                items: [{
                        xtype:'tabpanel',		
                        deferredRender:false, // Obrigado bombbr !
                        activeTab: 0,
                        items:[new Ext.Panel({
                                layout: 'absolute',
                                title: 'teste1',
                                frame:true,
                                items: [{
                                        xtype: 'textfield',
                                        name: 'xtype',
                                       // value:'teste',
                                        x:230, y:230, width:300
                                        }]
                                }),{
                                layout: 'absolute',
                                title: 'teste2',
                                frame:true,
                                items: [{
                                        name: 'boxLabel',
                                        xtype: 'textfield',
                                       //value:'teste',
                                        x:20, y:20, width:300
                                        }]
                                },{
                                layout: 'absolute',
                                title: 'teste3',
                                frame:true,
                                items: [{
                                        name: 'id',
                                        xtype: 'checkbox',
                                       // checked:true,
                                        x:20, y:20, width:300
                                }]
                       }]
                }],
		buttons:[{
			text:'Salvar',
			handler: function(){Ext.Msg.alert("", Ext.encode(win.getForm().getValues()))}
		},{
			text:'Cancelar'
		}]
	})

O Ext.form.FormPanel com layout 'fit' tem um tabpanel com vários Panels com layout absolute.
Com os subitems desta forma podemos simular um FormPanel com layout absolute.

Notícias, artigos e o maior fórum brasileiro sobre Java