Criar os InlineEditBox (aqueles campos que se mostram como texto, mas ao clicar se transformam em um campo para edição) é uma tarefa bem tranquila para ser feita usando o dojo. Mas caso você precise usar algum FilteringSelect com store, pode ser que você não ache a informação tão facilmente. Vou ilustrar aqui um pequeno exemplo.
Código HTML (Cabeçalho)
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.InlineEditBox");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
//Carregar o combo em "background" ao iniciar
dojo.addOnLoad(function() {
StatusStore.fetch();
})
</script>
Código HTML (corpo)
<div dojoType="dojo.data.ItemFileReadStore" jsId="StatusStore" url="/status/jsonselect/"></div>
<span dojoType="dijit.InlineEditBox" editor="dijit.form.FilteringSelect" editorParams="{'name':'status','store': StatusStore, 'searchAttr': 'name', 'InvalidMessage':'Selecione um novo status'}" onchange="alteraStatus()" title="Selecione um novo status">
Clique aqui para selecionar
</span>
Com esse código, você terá um campo como esse:

Exemplo 01
que ao clicar, se transformará em um FilteringSelect, assim:

Exemplo 02
E finalmente ao trocar o status, será executada a função do evento “onchange”: alteraStatus(). É nela que você toma as medidas necessárias (ajax para alterar o bd ou alguma ação diferente no form de acordo com a opção, etc) para cada página.
InlineEditBox é um recurso muito simples de ser criado e que dá uma boa aparência para a sua aplicação.
^^
Posts relacionados:
- Dojo Toolkit (ajax): Submetendo um form via POST Irei demonstrar nesse pequeno tutorial, como é fácil enviar os...
- Dojo (dojox) DataGrid Hoje vou apenas exemplificar a criação de um Dojox Datagrid....
- Otimizando o Dojo Toolkit Se você já está usando o Dojo ou começou com...
4 Comentários Recebidos
May 20th, 2010 @17:13
Oi Nivaldo,
estou implementando esta funcionalidade, mas me deparei com uma dificuldade: precisei acessar o FilteringSelect (mas especificamente a propriedade item), tem como? Pelo que vasculhei, a classe FilteringSelect não foi instanciada (tentei pegá-la pelo jsId e não consegui). Alguma dica?
May 21st, 2010 @08:17
Olá Danilo,
para acessar um campo do dijit você precisa usar o método:
dijit.byId()
Tenta com ele e veja o que consegue =)
Abraços
May 21st, 2010 @15:08
Obrigado Nivaldo, deu certo! o/
Mas por curiosidade ficou uma situação que eu não consegui me auto-explicar (heheheh), seguinte:
dentro da tag eu fiz uma chamada ao dojo.addOnLoad e passei uma função que tem esta instrução “dijit.byId(‘meuFiltering’)”, na ocasião eu estava atribuindo uma função ao evento onFocus, acontece que no console de erro do javascript mostra que o “dijit.byId(‘meuFiltering’) is undefined” .
Tem uma explicação para esta situação? Em todo caso é apenas para conhecimento, pois já resolvi atribuindo a função ao evento direto no atributo editorParams do InlineEditBox.
Valeu!
May 23rd, 2010 @10:58
Que bom que funcionou Danilo, fico Feliz.
Olha, estranho esse seu erro, porque se está dentro do onLoad do Dojo, teoricamente tudo já deveria estar operacional. As vezes é a chamada do onLoad que estava incorreta, ou algo do tipo. Mas fica dificil de falar assim sem analizar mesmo.
Abraços
Faça seu Comentário