PDA

View Full Version : Howto load, call to load a DataView?



andredecotia
16 Dec 2010, 1:30 PM
Howto load, call to load a DataView? And more, if I have a DataView, I have to load that or load the JsonStore? Got it?

fay
16 Dec 2010, 1:56 PM
Load the store. Have you looked at the Templates and DataView examples (http://dev.sencha.com/deploy/dev/examples/#sample-13)?

msinn
16 Dec 2010, 2:40 PM
just take a look to API DataView in the header class example, there you'll find some things you need

for loading the data you can configure your JsonStore with autoLoad:true and then the DataView config option store:yourJsonStoreReference, ....there are more possibilities to archieve that.

for refreshing, reloading the DataView take a look to those methods:

http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView?member=refresh
http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView?member=bindStore
http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView?member=setStore
http://dev.sencha.com/deploy/dev/docs/?class=Ext.DataView?member=getStore

andredecotia
17 Dec 2010, 2:52 AM
thanks all,

msinn, I really appreciated your tip, I have another doubt:

Must I load store? imagem-view? or another? For exemple: store.load();?
Detail: I am calling that out of this .js.

My code:

<%--
Document : panel_grid_pessoas
Created on : 14/09/2010
Author : André Asantos
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib tagdir="/WEB-INF/tags/ext" prefix="ext"%>

<!-- Início da biblioteca EXTjs -->
<link rel="stylesheet" type="text/css" href="js/ext-3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-3.1/ext-all.js"></script>
<!-- Fim da biblioteca EXTjs -->

<ext:body>
<ext:window id="popupPessoaGaleria" layout="form" closable="false" resizable="true" draggable="true" modal="true"
shadow="false" width="900" autoHeight="true">
<ext:tabPanel id="centerPanel" region="center" xtype="portal" activeItem="panelPessoaGaleria">

<ext:panel id="panelPrincipal" title="Principal" region="left" width="600" height="210">
<ext:form.formPanel id="pessoaGaleriaForm" frame="false" autoHeight="true" border="false" autoWidth="true" method="POST"
monitorValid="true">
<ext:form.textField id="campoIdPessoa" fieldLabel="Código" name="idPessoa" disabled="true" width="380" autoHeight="true" />
<ext:form.textField id="campoNome" fieldLabel="Nome" name="nome" allowBlank="false" width="380" autoHeight="true" />
<ext:form.textField id="campoEmail" fieldLabel="E-mail" name="email" allowBlank="true" width="380" autoHeight="true" />
<ext:form.textArea id="campoSobre" fieldLabel="Sobre" name="sobre" allowBlank="false" width="380" autoHeight="true" />
</ext:form.formPanel>
</ext:panel>

<ext:panel id="panelPessoaGaleria" title="Galeria de Foto" region="center" layout="table" layoutConfig="{columns: 2}"
autoHeight="true" autoWidth="true">
<s:include value="popupWindow_galeria_imagem.jsp" />
</ext:panel>

</ext:tabPanel>

<ext:button id="btnCancelarGaleria" menuAlign="left" text="Cancelar" onClick="handlerCancelButtonGaleria();" />
<ext:button id="btnSalvar" text="Salvar" />

</ext:window>

<ext:window id="popupPessoaUpload" layout="form" closable="false" resizable="true" draggable="true" modal="true" shadow="false"
width="900" autoHeight="true">
<ext:tabPanel id="centerPanelUpload" region="center" xtype="portal" activeItem="panelPrincipalUpload">

<ext:panel id="panelPrincipalUpload" title="Principal" region="left" width="600" height="210">
<ext:form.formPanel id="pessoaUploadForm" frame="false" autoHeight="true" border="false" autoWidth="true" method="POST"
monitorValid="true">
<ext:form.textField id="campoIdPessoaUpload" fieldLabel="Código" name="idPessoa" disabled="true" width="380" autoHeight="true" />
<ext:form.textField id="campoNomeUpload" fieldLabel="Nome" name="nome" allowBlank="false" width="380" autoHeight="true" />
<ext:form.textField id="campoEmailUpload" fieldLabel="E-mail" name="email" allowBlank="true" width="380" autoHeight="true" />
<ext:form.textArea id="campoSobreUpload" fieldLabel="Sobre" name="sobre" allowBlank="false" width="380" autoHeight="true" />

<ext:button id="btnSalvarUpload" text="Salvar" menuAlign="left" /> <!-- só pra amarrar botão e ação -->

</ext:form.formPanel>
</ext:panel>

<ext:panel id="panelPessoaUpload" title="Upload de Foto" region="center" layout="table" layoutConfig="{columns: 2}"
autoHeight="true" autoWidth="true">
<s:include value="popupWindow_upload_imagem.jsp" />
</ext:panel>

</ext:tabPanel>

<ext:button id="btnCancelarUpload" text="Cancelar" onClick="handlerCancelButtonUpload();" />
</ext:window>

<script type="text/javascript"><!--
/**
* Função que fecha a popup assim que o usuário clica no botão cancelar
*/
function handlerCancelButtonUpload(){
Ext.getCmp('popupPessoaUpload').hide();
}

/**
* Função que fecha a popup assim que o usuário clica no botão cancelar
*/
function handlerCancelButtonGaleria(){
Ext.getCmp('popupPessoaGaleria').hide();
}

/**
* Função que trata Resposta em Ajax (success) para requições que tratam do CRUD da Aplicação
*/
var successCRUDGaleria = function (resp,opt){
Ext.getCmp('gridPessoa').getStore().reload(); //atualizando o grid
Ext.getCmp('popupPessoaGaleria').hide(); //fechando o grid
}

/**
* Função que fecha a popup assim que o usuário clica no botão cancelar
*/
function successCRUDDelecao(){
Ext.getCmp('popupPessoaUpload').hide(); //fechando o grid
Ext.getCmp('gridPessoa').getStore().reload(); //atualizando o grid
}

/**
* Função que trata Resposta em Ajax (success) para requições que tratam do CRUD da Aplicação
*/
var successCRUDUpload = function (resp,opt){

Ext.getCmp('gridPessoa').getStore().reload(); //atualizando o grid

Ext.Msg.confirm('Importar Foto', 'Deseja Relacionar Upload à Pessoa?', function(btn) {
if(btn == 'yes') {
//Ext.Msg.alert('Importa Foto', 'OK...');
Ext.getCmp('panelPrincipalUpload').disable();
Ext.getCmp('panelPessoaUpload').enable();
} else {
Ext.Msg.alert('Importa Foto', 'Ok...');
Ext.getCmp('popupPessoaUpload').hide(); //fechando o grid
}
});
}

/**
* Função que trata Resposta em Ajax (failure) para requições que tratam do CRUD da Aplicação
*/
var failureCRUD = function (){
Ext.Msg.show({
title:'Erro - SGCS',
msg: 'Houve um erro ao gravar as informações no banco, por favor contate o administrador do sistema',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}

/**
* Função que trata Resposta em Ajax (failure) para requições que tratam do CRUD da Aplicação
*/
var emailInvalido = function (){
Ext.Msg.show({
title:'Erro - SGCS',
msg: 'Endereço de E-mail Inválido',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}

/**
* Função que trata Resposta em Ajax (failure) para requições que tratam do UNIQUE da Aplicação
*/
var failureUNIQUE = function (){
Ext.Msg.show({
title:'Erro - SGCS',
msg: 'Houve um problema ao tentar processar a sua solicitação, esta informação possui dependências.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}

/**
* CRUD da Aplicação
*/
var conn = new Ext.data.Connection();
function crudPessoa(modo) {

//salvar
if(modo == 1){
Ext.getCmp('popupPessoaUpload').setTitle('SGCS - Incluir Pessoa');
Ext.getCmp('btnSalvar').setText('Salvar');

Ext.getCmp('campoIdPessoaUpload').setValue('Automático');

//habilitando o campo para digitar
Ext.getCmp('campoSobreUpload').enable();
Ext.getCmp('campoNomeUpload').enable();
Ext.getCmp('campoEmail').enable();

//setando valor
Ext.getCmp('campoSobreUpload').setValue('');
Ext.getCmp('campoNomeUpload').setValue('');
Ext.getCmp('campoEmailUpload').setValue('');

//habilitando as abas
Ext.getCmp('panelPessoaUpload').disable();
Ext.getCmp('panelPrincipalUpload').enable();

Ext.getCmp('popupPessoaUpload').show();
Ext.getCmp('pessoaUploadForm').hasListener(true);
//btnSalvarUpload está amarrando a ação ao botão
Ext.getCmp('btnSalvarUpload').setHandler(

function(){
conn.request({
url: 'pessoas!save.action',
params: {

//primeiro o nome do atributo que está na Action e depois o nome do campo do .jsp
'campoSobre': Ext.getCmp('campoSobreUpload').getValue(),
'campoNome': Ext.getCmp('campoNomeUpload').getValue(),
'campoEmail': Ext.getCmp('campoEmailUpload').getValue()
},
success: successCRUDUpload,
failure: emailInvalido
});
Ext.getCmp('popupPessoaUpload').el.fadeIn().frame('#99BBE8');
});

//modificar

//id pra action

}else if(modo == 2){
var grid = Ext.getCmp('gridPessoa'); //a variável grid está recebendo a classe GridPanel
var sm = grid.getSelectionModel(); //a varaivel sm está recebendo o modelo de seleção
var sel = sm.getSelected(); //pegando o item que fora selecionado
if (sm.hasSelection()){ //se há item selecionado será executado código abaixo

var recebe = Ext.getCmp('gridPessoa').getSelectionModel().getSelected().get('idPessoa');

//para qdo. for modificar conseguir ter o parâmetro para funcionar upload_galeria
conn.request({
url: 'enviaIdDoAutorParaGaleriaAction.action',
params: {
'idPessoa': recebe //recebe está sendo passado de parâmetro para a Action, o atributo da Action é o idPessoa (setIdPessoa)
},
});

conn.request({
url: 'enviaIdDoAutorParaUploadAction.action',
params: {
'idPessoa': recebe //recebe está sendo passado de parâmetro para a Action, o atributo da Action é o idPessoa (setIdPessoa)
},
});

//I've tried those below:
//Ext.getCmp('panelPessoaGaleria').load();
//Ext.getCmp('panelPessoaGaleria').show();
//Ext.getCmp('panelPessoaGaleria').reload();
//Ext.getCmp('images-view').load();
//Ext.getCmp('images-view').getStore().reload();
//Ext.getCmp('images-view').store.load();
//Ext.getCmp('store').load();
//store.load();
//datav.getStore().reload();
//grid.getView().refresh();

Ext.getCmp('popupPessoaGaleria').show(); //mostrar a janela
Ext.getCmp('popupPessoaGaleria').setTitle('SGCS - Modificar Pessoa'); //pelo id está chamando as duas abas da janela
Ext.getCmp('btnSalvar').setText('Modificar'); //colocando um textlabel no btnSalvar
Ext.getCmp('campoIdPessoa').disable(); //tornando inalterável com disable()

//habilitando para ser modificável
Ext.getCmp('campoNome').enable();
Ext.getCmp('campoEmail').enable();
Ext.getCmp('campoSobre').enable();

//recuperando/trazendo o valor do item vindo do grid que por sua vez pega do JSON
Ext.getCmp('campoIdPessoa').setValue(sel.get('idPessoa'));
Ext.getCmp('campoNome').setValue(sel.get('nome'));
Ext.getCmp('campoSobre').setValue(sel.get('sobre'));
Ext.getCmp('campoEmail').setValue(sel.get('email'));

Ext.getCmp('pessoaGaleriaForm').hasListener(true);

Ext.getCmp('btnSalvar').setHandler(
function(){
conn.request({
url: 'pessoas!update.action',
params: {

//passando de argumento o getCmp('nomeDoCampo').getValue(), o primeiro representa o
//campo da Action e o segundo o campo do popup
'campoIdPessoa': Ext.getCmp('campoIdPessoa').getValue(),
'campoNome': Ext.getCmp('campoNome').getValue(),
'campoSobre': Ext.getCmp('campoSobre').getValue(),
'campoEmail': Ext.getCmp('campoEmail').getValue()
},
success: successCRUDGaleria,
failure: emailInvalido
});
Ext.getCmp('popupPessoaGaleria').el.fadeIn().frame('#99BBE8');
});
}else{
Ext.Msg.show({
title:'Erro - SGCS',
msg: 'Não há dados selecionados para serem modificados',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
Ext.getCmp('popupPessoaGaleria').el.fadeIn().frame('#99BBE8');

//remover
}else if(modo == 3){
var grid = Ext.getCmp('gridPessoa');
var sm = grid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()){
Ext.getCmp('popupPessoaUpload').show();
Ext.getCmp('popupPessoaUpload').setTitle('SGCS - Remover Pessoa');
Ext.getCmp('btnSalvarUpload').setText('Remover');

//campos não serão passíveis de alteração
Ext.getCmp('campoIdPessoaUpload').disable();
Ext.getCmp('campoEmailUpload').disable();
Ext.getCmp('campoSobreUpload').disable();
Ext.getCmp('campoNomeUpload').disable();

//desabilitando a telinha de upload
Ext.getCmp('panelPessoaUpload').disable();

//recuperando os valores dos itens
Ext.getCmp('campoIdPessoaUpload').setValue(sel.get('idPessoa'));
Ext.getCmp('campoEmailUpload').setValue(sel.get('email'));
Ext.getCmp('campoNomeUpload').setValue(sel.get('nome'));
Ext.getCmp('campoSobreUpload').setValue(sel.get('sobre'));

Ext.getCmp('btnSalvarUpload').setHandler(
function(){
conn.request({
url: 'pessoas!delete.action',
params: {

//passando o getCmp(nomeDoCampo).getValue() de argumento, primeiro o
//nome do atributo que está na Action e depois o nome do campo do .jsp
'campoIdPessoa': Ext.getCmp('campoIdPessoaUpload').getValue()
},
success: successCRUDDelecao,
failure:failureUNIQUE
});
Ext.getCmp('popupPessoaUpload').el.fadeIn().frame('#99BBE8');
});
}else{
Ext.Msg.show({
title:'Erro - SGCS',
msg: 'Não há dados selecionados para serem removidos',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
Ext.getCmp('popupPessoaUpload').el.fadeIn().frame('#99BBE8');
}
}

--></script>

</ext:body>

andredecotia
17 Dec 2010, 4:03 AM
thanks guys,

hey msinn, thanks again,

//I've tried those below:

//Ext.getCmp('datav').bindStore(pessoasStores);
//Ext.getCmp('panelPessoaGaleria').load();
//Ext.getCmp('panelPessoaGaleria').show();
//Ext.getCmp('panelPessoaGaleria').reload();
//Ext.getCmp('images-view').load();
//Ext.getCmp('images-view').getStore().reload();
//Ext.getCmp('images-view').store.load();
//Ext.getCmp('store').load();
//store.load();
//datav.getStore().reload();
//grid.getView().refresh();

but still not working...

msinn
17 Dec 2010, 5:39 AM
if you need more help
try to post a working showcase as here described: http://www.sencha.com/learn/Ext_Forum_Help#Posting_a_working_showcase
so I can understand what you're trying to do