Ir para conteúdo


Foto

[RESOLVIDO] Como enviar foco para o botão UPDATE do rowEditor?


  • Por favor, faça o login para responder
9 respostas neste tópico

#1 Link

Link

    Member Avançado

  • Membros
  • PipPipPip
  • 761 posts

Postado 12 December 2013 - 08:22

Olá pessoal,

    Alguém sabe como enviar o foco de um campo no grid do rowEditor para o botão UPDATE ou CANCEL
    Também não descobri qual é o nome do itemId destes botões.


Abraços

#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 12 December 2013 - 09:31

Link, internamente é utilizado a classe Ext.grid.RowEditorButtons para renderizar os botões. Se vc olhar no código fonte irá ver que o botão "Update" possui o itemId com o valor "update" assim podendo ser este resgatado, já o botão "Cancel" não possui essa propriedade, mas se olhar no código verá que tanto o botão "Update" quanto o botão "Cancel" possuí uma classe CSS então vc pode utilizar esta para buscar o componente pelo Ext.ComponentQuery, tipo:
var cssPrefix = Ext.baseCSSPrefix,
    editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]'),
    cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]');
Veja se lhe ajuda.

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#3 Link

Link

    Member Avançado

  • Membros
  • PipPipPip
  • 761 posts

Postado 12 December 2013 - 10:02

Link, internamente é utilizado a classe Ext.grid.RowEditorButtons para renderizar os botões. Se vc olhar no código fonte irá ver que o botão "Update" possui o itemId com o valor "update" assim podendo ser este resgatado, já o botão "Cancel" não possui essa propriedade, mas se olhar no código verá que tanto o botão "Update" quanto o botão "Cancel" possuí uma classe CSS então vc pode utilizar esta para buscar o componente pelo Ext.ComponentQuery, tipo:

var cssPrefix = Ext.baseCSSPrefix,
    editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]'),
    cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]');
Veja se lhe ajuda.


Olá meu amigo Legolas,

  Obrigado por responder.

  Seguinte, baseado na sua sugestão e como é uma classe CSS, eu fiz essas duas maneiras para enviar o foco para o botão, mas não deu certo:
   editorBtnUpdate.focusCls();
   //editorBtnUpdate.focusElementCls();

  Para as duas formas dá o seguinte erro:

Uncaught TypeError: Object [object Array] has no method 'focusCls'

.

  O que estaria errado legolas?

Abraços


#4 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 12 December 2013 - 10:59

   Seguinte, baseado na sua sugestão e como é uma classe CSS, eu fiz essas duas maneiras para enviar o foco para o botão, mas não deu certo:

   editorBtnUpdate.focusCls();
   //editorBtnUpdate.focusElementCls();

   Para as duas formas dá o seguinte erro:

Uncaught TypeError: Object [object Array] has no method 'focusCls'

.

   O que estaria errado legolas?

Link o próprio erro já diz tudo o objeto do botão não contém o método "fucusCls". Vc pode utilizar o método focus do Button.
Veja se lhe ajuda.

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#5 Link

Link

    Member Avançado

  • Membros
  • PipPipPip
  • 761 posts

Postado 12 December 2013 - 11:19


   Seguinte, baseado na sua sugestão e como é uma classe CSS, eu fiz essas duas maneiras para enviar o foco para o botão, mas não deu certo:

   editorBtnUpdate.focusCls();
   //editorBtnUpdate.focusElementCls();

   Para as duas formas dá o seguinte erro:

Uncaught TypeError: Object [object Array] has no method 'focusCls'

.

   O que estaria errado legolas?

Link o próprio erro já diz tudo o objeto do botão não contém o método "fucusCls". Vc pode utilizar o método focus do Button.
Veja se lhe ajuda.


Já tentei também usar o método focus, mas dá o mesmo erro.

#6 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 12 December 2013 - 13:06

Já tentei também usar o método focus, mas dá o mesmo erro.

Link, falha minha meu caro, coloquei o código errado, pois estamos tentando acessar o método focus do array de elementos retornados pelo método query, veja abaixo como deve ser:
var cssPrefix = Ext.baseCSSPrefix,
    editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]')[0],
    cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]')[0];

editorBtnUpdate.focus();

Agora sobre efetuar o foco do campo para o botão vc conseguiu? Se não vc tem q add um listeners no campo da propriedade editor para o evento desejado.

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#7 Link

Link

    Member Avançado

  • Membros
  • PipPipPip
  • 761 posts

Postado 12 December 2013 - 15:39


Já tentei também usar o método focus, mas dá o mesmo erro.

Link, falha minha meu caro, coloquei o código errado, pois estamos tentando acessar o método focus do array de elementos retornados pelo método query, veja abaixo como deve ser:
var cssPrefix = Ext.baseCSSPrefix,
    editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]')[0],
    cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]')[0];

editorBtnUpdate.focus();

Agora sobre efetuar o foco do campo para o botão vc conseguiu? Se não vc tem q add um listeners no campo da propriedade editor para o evento desejado.


Legal meu amigo, deu tudo certo agora, eu fiz assim:

...
                    editor:
                        {
                            xtype: 'numberfield',
                            ...
                            listeners: {
 
                                keypress: function (eOpts) {
                                    var cssPrefix = Ext.baseCSSPrefix;
                                    var editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]')[0];
                                    var cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]')[0];

                                    editorBtnUpdate.focus();
                                    
                                }
   


 Agora vou te explicar  razão de ter que criar essa rotina.
 No meu rowEditor, eu tenho uma combobox e um numberfield (que é disabilitado para edição). Quando eu escolho um valor na combobox, o sistema atualiza o  campo numberfield conforme mostro abaixo:

{
                    text: 'Servico',
                    dataIndex: 'Nome',
                    flex: 1,
                    editor: {
                        xtype: 'combo',
                        displayField: 'Nome',
                        valueField: 'Id',
                        allowBlank: true,
                        lastQuery: '',
                        listeners: {
                            select: function (combo, record) {

                                // Obtém o valor do serviço
                                var valueComboAtual= combo.getValue();
                                var valorServ = 0;
                                var rec = combo.findRecordByValue(valueComboAtual);
                                if (rec) {
                                    valorServ = rec.get('ValorServico');
                                }

                                Ext.ComponentQuery.query('#valorServico')[0].setValue(valorServ);

                            }
                           
                        }
                    }
                },
                {
                    xtype: 'numbercolumn',
                    text: 'Valor',
                    align: 'right',
                    dataIndex: 'ValorServico',
                    renderer: 'usMoney',
                    editor:
                        {
                            xtype: 'numberfield',
                            disabled: true,    // <--- 
                            allowBlank: false,
                            itemId: 'valorServico',
                            msgTarget: 'side',                                             
                            currencySymbol: 'R$',
                            decimalPrecision: 2,
                            allowDecimals: true,
                            alwaysDisplayDecimals: true,
                            useThousandSeparator: true,
                            thousandSeparator: '.',
                            decimalSeparator: ',',
                            allowNegative: false,
                            value: 0,
                            enableKeyEvents: true,
                            listeners: {
                                keypress: function (eOpts) {
                                    var cssPrefix = Ext.baseCSSPrefix;
                                    var editorBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-update-button]')[0];
                                    var cancelBtnUpdate = Ext.ComponentQuery.query('roweditorbuttons button[cls=' + cssPrefix + 'row-editor-cancel-button]')[0];

                                    editorBtnUpdate.focus();
                                    
                                }
                            }
                        }
                }


 O problema começa assim, o campo [ValorServico] que é um numberfield e não pode ter seu campo habilitado para edição, ou seja, eu uso a config disabled: true.  Só que se eu desabilitar a edição, o valor deste campo vai zerado quando eu salvo o registro no meu server, e neste caso o campo foi alimentado com um valor maior que zero a partir da combobox conforme eu demonstrei acima. Eu sei que parece meio confuso, mas aí tive a ideia de enviar o foco para o botão UPDATE do rowEditor, caso o usuário tentasse alterar o campo [ValorServico], o que não é permitido entendeu???  rsrs



#8 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 12 December 2013 - 21:27

 O problema começa assim, o campo [ValorServico] que é um numberfield e não pode ter seu campo habilitado para edição, ou seja, eu uso a config disabled: true.  Só que se eu desabilitar a edição, o valor deste campo vai zerado quando eu salvo o registro no meu server, e neste caso o campo foi alimentado com um valor maior que zero a partir da combobox conforme eu demonstrei acima. Eu sei que parece meio confuso, mas aí tive a ideia de enviar o foco para o botão UPDATE do rowEditor, caso o usuário tentasse alterar o campo [ValorServico], o que não é permitido entendeu???  rsrs

???
Se entendi direito o seu problema é que vc deixa o campo "ValorServiço" habilitado assim ao realizar o update não está enviando para o server o valor contido nesse? Ou este campo está desabilitado porém vc seta o valor através do evento do combo porém mesmo assim está indo com o valor zero?
Vc já tentou monitorar o evento edit do plugin para ver se a record recebida no contexto está com o valor atualizado?
Dica: vc monitora o evento "select" do seu combo que recebe como segundo parâmetro um array com as records selecionadas, assim vc não precisa utilizar o método "findRecordByValue" para resgatar a record, pois se for única seleção vc pode resgatar a primeira posição do array com as records. Assim e menos um processo

"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#9 Link

Link

    Member Avançado

  • Membros
  • PipPipPip
  • 761 posts

Postado 17 December 2013 - 09:16


 O problema começa assim, o campo [ValorServico] que é um numberfield e não pode ter seu campo habilitado para edição, ou seja, eu uso a config disabled: true.  Só que se eu desabilitar a edição, o valor deste campo vai zerado quando eu salvo o registro no meu server, e neste caso o campo foi alimentado com um valor maior que zero a partir da combobox conforme eu demonstrei acima. Eu sei que parece meio confuso, mas aí tive a ideia de enviar o foco para o botão UPDATE do rowEditor, caso o usuário tentasse alterar o campo [ValorServico], o que não é permitido entendeu???  rsrs

???
Se entendi direito o seu problema é que vc deixa o campo "ValorServiço" habilitado assim ao realizar o update não está enviando para o server o valor contido nesse? Ou este campo está desabilitado porém vc seta o valor através do evento do combo porém mesmo assim está indo com o valor zero?
Vc já tentou monitorar o evento edit do plugin para ver se a record recebida no contexto está com o valor atualizado?
Dica: vc monitora o evento "select" do seu combo que recebe como segundo parâmetro um array com as records selecionadas, assim vc não precisa utilizar o método "findRecordByValue" para resgatar a record, pois se for única seleção vc pode resgatar a primeira posição do array com as records. Assim e menos um processo


Ok meu amigo Legolas, você entendeu o meu problema (como sempre...rs).
Vou seguir suas orientações e fazer os testes aqui, logo logo posto a conclusão ok?

abraços

#10 zatta

zatta

    Novato

  • Membros
  • PipPip
  • 19 posts

Postado 05 November 2017 - 20:14

eu resolvi forçando o setDisabled

 

 

editorBtnUpdate[0].setDisabled(false);






0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos