Ext: TabPanel e store.load

6 respostas
Luiz_Augusto_Prado

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)

store2.load({callback: function(records,o,s)
   {
         var arrayfinal =[];
         for(var i=0; i<records.length; i++)
         {     
                var rec = records[i];
                arrayfinal.push({boxLabel: rec.get('boxLabel'), name: rec.get('name'), id:rec.get('id'), checked:rec.get('checked') });
        }

        myCheckboxGroup.items.get(0).items=(arrayfinal);

        // gambiarra em loop
        for(var v=form_usuarios_edit.get(0).items.length-1; v>=0; v--)
	{
                form_usuarios_edit.items.get(0).setActiveTab(v)
        }


   }});

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?

6 Respostas

davidbuzatto

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

bombbr

Luiz Augusto Prado:
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

{
    xtype: 'tabpanel',
    id: 'id_1',
    region: 'center',
    deferredRender: false,
    activeTab: 0,
    margins: '10 10 10 10'
}
davidbuzatto

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 :frowning:
Não tinha achado isso na documentação!

Muito bom saber :wink:

[]´s

bombbr

davidbuzatto:
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.

davidbuzatto

bombbr:
davidbuzatto:
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 :slight_smile:

Obrigado!

Luiz_Augusto_Prado

Show! Muitissimo obrigado bombbr! Funcionou perfeitamente.

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

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.

Criado 11 de novembro de 2010
Ultima resposta 12 de nov. de 2010
Respostas 6
Participantes 3