Ir para conteúdo


Foto

rowwidget Grid

rowwidget grid

Melhor Resposta gmartins , 31 July 2017 - 15:05

Boa tarde,

 

Segue solução: https://www.sencha.c...952#post1201952

 

https://fiddle.sench...3r5&view/editor

Ext.define(null, {
    override: 'Ext.view.Table',

    onFocusEnter: function(e) {
    // We need to react in a correct way to focus entering the TableView.
    // Much of this is based upon http://www.w3.org/TR/wai-aria-practices-1.1/#h-grid
    // specifically: "Once focus has been moved inside the grid, subsequent tab presses that re-enter the grid shall return focus to the cell that last held focus."
    //
    // If an interior element is being focused, then if it is a cell, we enter navigable mode at that cell.
    // If an interior element *wthin* a cell is being focused, we enter actionable mode at that cell and focus that element.
    // If just the view itself is being focused we focus the lastFocused CellContext. This is the last cell position which
    // the user navigated to in any mode, actinoable or navigable. It is maintained during navigation in navigable mode.
    // It is set upon focus leave if focus left during actionable mode - set to actionPosition.
    // actionPosition is cleared when actionable mode is exited.
    //
    // The important context is lastFocused.

        var me = this,
            fromComponent = e.fromComponent,
            navigationModel = me.getNavigationModel(),
            focusPosition,
            cell,
            focusTarget;

        // If a mousedown listener has synchronously focused an internal element
        // from outside and proceeded to process focus consequences, then the impending focusenter
        // MUST NOT process focus consequences.
        // Also, if focus entered into a nested Component, we mustn't process it.
        // See Ext.grid.NagivationModel#onCellMouseDown
        if (me.containsFocus || e.toComponent !== me) {
            return Ext.Component.prototype.onFocusEnter.call(me, e);
        }

        // FocusEnter while in actionable mode.
        if (me.actionableMode) {
            // If we own the actionPosition it must be due to a setActionPosition call
            // setting the actionPosition and then focusing the actionable element.
            // We need to disable view outer el focusing while focus is inside.
            if (me.actionPosition) {
                me.el.dom.setAttribute('tabIndex', '-1');
                me.cellFocused = true;
                return;
            }

            // Must have swapped sides of a lockable.
            // We don't know what we're focusing into yet.
            // So exit actionable mode.
            // We could be focusing a cell, in which case navigable mode is correct.
            // If we are focusing an interior element that is not a cell, we will enter actionable mode.
            me.ownerGrid.setActionableMode(false);
        }

        // The underlying DOM event
        e = e.event;

        // We can only focus if there are rows in the row cache to focus *and* records
        // in the store to back them. Buffered Stores can produce a state where
        // the view is not cleared on the leading end of a reload operation, but the
        // store can be empty.
        if (!me.cellFocused && me.all.getCount() && me.dataSource.getCount()) {
            focusTarget = e.getTarget();

            // The View's el has been focused.
            // We now have to decide which cell to focus
            if (focusTarget === me.el.dom) {
                // This lastFocused value is set on mousedown on the scrollbar in IE/Edge.
                // Those browsers focus the element on mousedown on its scrollbar
                // which is not what we want, so throw focus back in this
                // situation.
                // See Ext.view.navigationModel for this being set.
                if (me.lastFocused === 'scrollbar') {
                    if (e.relatedTarget) {
                        e.relatedTarget.focus();
                    }

                    return;
                }

                focusPosition = me.getDefaultFocusPosition(fromComponent);

                // Not a descendant which we allow to carry focus. Focus the view el.
                if (!focusPosition) {
                    e.stopEvent();
                    me.el.focus();

                    return;
                }

                // We are entering navigable mode, so we have a focusPosition but no focusTarget
                focusTarget = null;
            }
            // Hit the invisible focus guard. This mean SHIT+TAB back into the grid.
            // Focus last cell.
            else if (focusTarget === me.tabGuardEl) {
                focusPosition = new Ext.grid.CellContext(me).setPosition(me.all.endIndex, me.getVisibleColumnManager().getColumns().length - 1);
                focusTarget = null;
            }
            // Now there are just two valid choices.
            // Focused a cell, or an interior element within a cell.
            else if (cell = e.getTarget(me.getCellSelector())) {
                // Programmatic focus of a cell...
                if (focusTarget === cell) {
                    // We are entering navigable mode, so we have a focusPosition but no focusTarget
                    focusPosition = new Ext.grid.CellContext(me).setPosition(me.getRecord(focusTarget), me.getHeaderByCell(cell));
                    focusTarget = null;
                }
                // If what is being focused an interior element, but is not a cell, we plan to enter
                // actionable mode. This will happen when an ActionColumn invokes a modal window
                // and that window is dismissed leading to automatic focus of the previously focused element.
                // This also happens when SHIFT+TAB moves back towards the view. It navigated to the last tabbable element.
                // Testing whether the focusTarget isFocusable is a fix for IE. It can sometimes fire a focus event with the .x-scroll-scroller as the target
                else if (focusTarget && Ext.fly(focusTarget).isFocusable() && me.el.contains(focusTarget)) {
                    // We are entering actionable mode, so we have a focusPosition and a focusTarget
                    focusPosition = new Ext.grid.CellContext(me).setPosition(me.getRecord(focusTarget), me.getHeaderByCell(cell));
                }
            }
        }
        // We must exit from the above code block with focusPosition set to a CellContext
        // which is going to be either the navigable or actionable position. If focusPosition
        // is null, we are not focusing the view.
        //
        // IF we are entering actionable mode, then focusTarget will be set to an internal
        // focusable element within the cell referenced by focusPosition.

        // We calculated a cell to focus on. Either from the target element, or the last focused position
        if (focusPosition) {
            // Disable tabbability of elements within this view.
            me.toggleChildrenTabbability(false);

            // If we fall through to here with a focusTarget, it means that it's an internal focusable element
            // and we request to enter actionable mode at the focusPosition
            if (focusTarget) {
                // Tell actionable mode which element we want to focus.
                // By default it focuses the first focusable in the cell.
                focusPosition.target = focusTarget;

                // If we successfully entered actionable mode at the requested position, prevent entering navigable mode by nulling
                // the focusPosition, and focus the intended target (setActionableMode will have focused the *first* tabbable in the cell)
                // If we were unsuccessful, then we must proceed with focusPosition set in order to enter navigable mode here.
                if (me.ownerGrid.setActionableMode(true, focusPosition)) {
                    focusPosition = null;
                }
            }

            // Test again here.
            // If we successfully entered actionable mode, this will be null.
            // If the attempt failed, it should fall back to navigable mode.
            if (focusPosition) {
                navigationModel.setPosition(focusPosition, null, e, null, true);
            }

            // We now contain focus if that was successful
            me.cellFocused = me.el.contains(Ext.Element.getActiveElement());
            if (me.cellFocused) {
                me.el.dom.setAttribute('tabIndex', '-1');
            }
        }

        // Skip the AbstractView's implementation.
        // It initializes its NavModel differently.
        Ext.Component.prototype.onFocusEnter.call(me, e);
    }
});
Visualizar todo o conteúdo do post


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

#1 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2017 - 17:46

Galera boa tarde, poderiam me ajudar aqui?
 
Não sei o que está errado  :-[ , não está trazendo os dados da segunda grid e ainda está quebrando o HTML.
 
Obs: preciso manter a estrutura modulo.qualidade.blah.... ( Acredito que o problema esteja ai rsrsr)
 
https://fiddle.sencha.com/#fiddle/1vap



#2 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 830 posts
  • LocationGoiânia - GO

Postado 09 May 2017 - 17:56

Crie um fiddle por favor pra melhor análise do seu caso

 

http://fiddle.sencha.com


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#3 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2017 - 18:23

Ta ai maninho, tks



#4 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 830 posts
  • LocationGoiânia - GO

Postado 09 May 2017 - 19:37

Sobre os dados que nao carrega o problema está na associação

- Na sua associação você está omitindo o namespace do model parent: 

faça assim ou crie um schema, ai poderá usar apenas qualidade/....

reference: {
            parent: 'MyApp.model.qualidade.PerguntasModel',
            inverse: 'respostas'
        }

Sobre o layout doidão, especifique uma altura para a grid.

 

Segue meu fork funcionando

 

https://fiddle.sench...vb0&view/editor


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#5 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2017 - 21:01

Oopa!!! salvou a minha vida já rsrsr,

 

O layout está com o 'fit' porque está sendo renderizado dentro de em outo componente, igual a dashboard que vem nos exemplos.

 

Outra pergunta rsrsr, existe a possibilidade da associação vir de outro Store passando como parâmetro "id_pergunta" para o meu backend?

 

Tipo fazer a requisição somente qndo expande o a grid?

 

Meu serve não é dos melhores e estou tentando reduzir ao máximo o consumo dele rsrsr.



#6 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 830 posts
  • LocationGoiânia - GO

Postado 09 May 2017 - 21:32

Existe sim, você pode configurar uma role e o store no inverse da sua association. sendo assim irá requisitar para outra url os dados associatods

Com o remoteFilter: true irá mandar o parametro post_id como filtro do comentário. sendo assim não precisa trabalhar com dados aninhados

 

sobre o carregando por demanda ao expandir, verifique se a config implicitIncludes no reader do proxy atende

reader: {
            type: 'json',
            rootProperty: 'data',           
            implicitIncludes: false
        }

Exemplo model Comment.js

fields:[
...
        {
            name: 'post_id',
            allowNull: false,
            type: 'int',
            reference: {
                type: 'Post',
                role: 'post',
                inverse: {
                    role: 'comentarios',
                    storeConfig: {
                        model: 'MyApp.model.Comment',
                        remoteFilter: true,
                        proxy: {
                            type: 'rest',
                            url: 'sua/url/para/comments'
                        }
                    }
                }
            }
        }
...
    ]

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#7 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 09 May 2017 - 21:42

Tu é ninja d+ man rsrsr,

 

Vou testar o código amanhã no serviço, todo meu font está lá rsrsr,

 

Criei duas funções lá no ViewController para editar as perguntas e respostas mas está gerando erro na grid interna: https://fiddle.sencha.com/#fiddle/1vap

Uncaught TypeError: Cannot read property 'isModel' of null

Acredito que com o código que você me passou acima isso não ocorra neh?

 

Desde já muito obrigado pela imensa ajuda!!!


  • Wemerson Januario curtiu isso

#8 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 830 posts
  • LocationGoiânia - GO

Postado 09 May 2017 - 21:58

bem provável. 


Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#9 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 11 May 2017 - 10:59

bem provável. 

 

Man, não consegui reproduzir o seu exemplo mais, consegui com o "hasMany" no model perguntas, mas continua está gerando o erro:

Uncaught TypeError: Cannot read property 'isModel' of null 

Quando clica em qualquer lugar da Grid interna.

 

Já procurei no fórum da Senha: https://www.sencha.c...el-of-null-quot mas sem solução.

 

Poderia me ajudar novamente? 



#10 Wemerson Januario

Wemerson Januario

    Administrador Ext JS Brasil

  • Administrators
  • 830 posts
  • LocationGoiânia - GO

Postado 11 May 2017 - 11:18

Isso é um bug da versão 6.2, no Ext JS 6.5 já foi corrigido isso. Em 1 hora será feito o lançamento oficial da versão 6.5 pela Sencha. "stay tunned".

 

Caso precisa de override para 6.2 solicite lá na thread official um workaround talvez possam compartilhar algum patch.

 

vlw


  • gmartins curtiu isso

Wemerson Januario
http://wemersonjanuario.com.br
Twitter: @januariocoder

 

Treinamento e Consultoria Ext JS. Qualifique-se já!


#11 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 15 May 2017 - 12:02

Isso é um bug da versão 6.2, no Ext JS 6.5 já foi corrigido isso. Em 1 hora será feito o lançamento oficial da versão 6.5 pela Sencha. "stay tunned".

 

Caso precisa de override para 6.2 solicite lá na thread official um workaround talvez possam compartilhar algum patch.

 

vlw

 

Man mesmo com a atualização o problema persiste, o estranho é que nos exemplo não existe o erro.

 

https://fiddle.sencha.com/#fiddle/1vap

 

Acredito que esteja faltando algum parâmetro na construção das minhas classes.



#12 gmartins

gmartins

    Novato

  • Membros
  • PipPip
  • 12 posts

Postado 31 July 2017 - 15:05   Melhor Resposta

Boa tarde,

 

Segue solução: https://www.sencha.c...952#post1201952

 

https://fiddle.sench...3r5&view/editor

Ext.define(null, {
    override: 'Ext.view.Table',

    onFocusEnter: function(e) {
    // We need to react in a correct way to focus entering the TableView.
    // Much of this is based upon http://www.w3.org/TR/wai-aria-practices-1.1/#h-grid
    // specifically: "Once focus has been moved inside the grid, subsequent tab presses that re-enter the grid shall return focus to the cell that last held focus."
    //
    // If an interior element is being focused, then if it is a cell, we enter navigable mode at that cell.
    // If an interior element *wthin* a cell is being focused, we enter actionable mode at that cell and focus that element.
    // If just the view itself is being focused we focus the lastFocused CellContext. This is the last cell position which
    // the user navigated to in any mode, actinoable or navigable. It is maintained during navigation in navigable mode.
    // It is set upon focus leave if focus left during actionable mode - set to actionPosition.
    // actionPosition is cleared when actionable mode is exited.
    //
    // The important context is lastFocused.

        var me = this,
            fromComponent = e.fromComponent,
            navigationModel = me.getNavigationModel(),
            focusPosition,
            cell,
            focusTarget;

        // If a mousedown listener has synchronously focused an internal element
        // from outside and proceeded to process focus consequences, then the impending focusenter
        // MUST NOT process focus consequences.
        // Also, if focus entered into a nested Component, we mustn't process it.
        // See Ext.grid.NagivationModel#onCellMouseDown
        if (me.containsFocus || e.toComponent !== me) {
            return Ext.Component.prototype.onFocusEnter.call(me, e);
        }

        // FocusEnter while in actionable mode.
        if (me.actionableMode) {
            // If we own the actionPosition it must be due to a setActionPosition call
            // setting the actionPosition and then focusing the actionable element.
            // We need to disable view outer el focusing while focus is inside.
            if (me.actionPosition) {
                me.el.dom.setAttribute('tabIndex', '-1');
                me.cellFocused = true;
                return;
            }

            // Must have swapped sides of a lockable.
            // We don't know what we're focusing into yet.
            // So exit actionable mode.
            // We could be focusing a cell, in which case navigable mode is correct.
            // If we are focusing an interior element that is not a cell, we will enter actionable mode.
            me.ownerGrid.setActionableMode(false);
        }

        // The underlying DOM event
        e = e.event;

        // We can only focus if there are rows in the row cache to focus *and* records
        // in the store to back them. Buffered Stores can produce a state where
        // the view is not cleared on the leading end of a reload operation, but the
        // store can be empty.
        if (!me.cellFocused && me.all.getCount() && me.dataSource.getCount()) {
            focusTarget = e.getTarget();

            // The View's el has been focused.
            // We now have to decide which cell to focus
            if (focusTarget === me.el.dom) {
                // This lastFocused value is set on mousedown on the scrollbar in IE/Edge.
                // Those browsers focus the element on mousedown on its scrollbar
                // which is not what we want, so throw focus back in this
                // situation.
                // See Ext.view.navigationModel for this being set.
                if (me.lastFocused === 'scrollbar') {
                    if (e.relatedTarget) {
                        e.relatedTarget.focus();
                    }

                    return;
                }

                focusPosition = me.getDefaultFocusPosition(fromComponent);

                // Not a descendant which we allow to carry focus. Focus the view el.
                if (!focusPosition) {
                    e.stopEvent();
                    me.el.focus();

                    return;
                }

                // We are entering navigable mode, so we have a focusPosition but no focusTarget
                focusTarget = null;
            }
            // Hit the invisible focus guard. This mean SHIT+TAB back into the grid.
            // Focus last cell.
            else if (focusTarget === me.tabGuardEl) {
                focusPosition = new Ext.grid.CellContext(me).setPosition(me.all.endIndex, me.getVisibleColumnManager().getColumns().length - 1);
                focusTarget = null;
            }
            // Now there are just two valid choices.
            // Focused a cell, or an interior element within a cell.
            else if (cell = e.getTarget(me.getCellSelector())) {
                // Programmatic focus of a cell...
                if (focusTarget === cell) {
                    // We are entering navigable mode, so we have a focusPosition but no focusTarget
                    focusPosition = new Ext.grid.CellContext(me).setPosition(me.getRecord(focusTarget), me.getHeaderByCell(cell));
                    focusTarget = null;
                }
                // If what is being focused an interior element, but is not a cell, we plan to enter
                // actionable mode. This will happen when an ActionColumn invokes a modal window
                // and that window is dismissed leading to automatic focus of the previously focused element.
                // This also happens when SHIFT+TAB moves back towards the view. It navigated to the last tabbable element.
                // Testing whether the focusTarget isFocusable is a fix for IE. It can sometimes fire a focus event with the .x-scroll-scroller as the target
                else if (focusTarget && Ext.fly(focusTarget).isFocusable() && me.el.contains(focusTarget)) {
                    // We are entering actionable mode, so we have a focusPosition and a focusTarget
                    focusPosition = new Ext.grid.CellContext(me).setPosition(me.getRecord(focusTarget), me.getHeaderByCell(cell));
                }
            }
        }
        // We must exit from the above code block with focusPosition set to a CellContext
        // which is going to be either the navigable or actionable position. If focusPosition
        // is null, we are not focusing the view.
        //
        // IF we are entering actionable mode, then focusTarget will be set to an internal
        // focusable element within the cell referenced by focusPosition.

        // We calculated a cell to focus on. Either from the target element, or the last focused position
        if (focusPosition) {
            // Disable tabbability of elements within this view.
            me.toggleChildrenTabbability(false);

            // If we fall through to here with a focusTarget, it means that it's an internal focusable element
            // and we request to enter actionable mode at the focusPosition
            if (focusTarget) {
                // Tell actionable mode which element we want to focus.
                // By default it focuses the first focusable in the cell.
                focusPosition.target = focusTarget;

                // If we successfully entered actionable mode at the requested position, prevent entering navigable mode by nulling
                // the focusPosition, and focus the intended target (setActionableMode will have focused the *first* tabbable in the cell)
                // If we were unsuccessful, then we must proceed with focusPosition set in order to enter navigable mode here.
                if (me.ownerGrid.setActionableMode(true, focusPosition)) {
                    focusPosition = null;
                }
            }

            // Test again here.
            // If we successfully entered actionable mode, this will be null.
            // If the attempt failed, it should fall back to navigable mode.
            if (focusPosition) {
                navigationModel.setPosition(focusPosition, null, e, null, true);
            }

            // We now contain focus if that was successful
            me.cellFocused = me.el.contains(Ext.Element.getActiveElement());
            if (me.cellFocused) {
                me.el.dom.setAttribute('tabIndex', '-1');
            }
        }

        // Skip the AbstractView's implementation.
        // It initializes its NavModel differently.
        Ext.Component.prototype.onFocusEnter.call(me, e);
    }
});





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

0 membros, 0 visitantes, 0 membros anônimos