Ir para conteúdo


Foto

Como aplicar uma quebra de linha a um componente Text

text quebra linha word-wrap

Melhor Resposta iso48 , 12 July 2016 - 09:51

Viva Marcelo,

 

Penso que o que poderá estar a ocorrer é que está a testar o campo escrevendo uma unica palavra com muitos caracteres (20, 30...). Isto nunca funcionará porque a quebra da linha vai ser efectuada no espaço entre as palavras e não no meio de uma palavra. Tente testar com um texto com várias palavras.

 

Errado:

Eyudrwedtgewuewsdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

 

CERTO:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat lacus, malesuada non laoreet id, mattis et massa. 

Visualizar todo o conteúdo do post


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

#1 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 08 July 2016 - 09:42

Olá, pessoal

 

Estou tentando mostrar um texto recuperado em um componente Text que está dentro de uma Window. Porém, como o texto é um pouco grande, o elemento não faz a quebra de linha automaticamente e o texto não aparece a menos que eu redimensione a Window. Alguém tem ideia de como resolver?

 

Agradeço desde já..



#2 iso48

iso48

    Member Avançado

  • Membros
  • PipPipPip
  • 60 posts

Postado 09 July 2016 - 06:45

Olá,

 

O componente que está a utilizar na window para exibir o texto é um campo textarea?

 

Se for esse o caso, sugiro o seguinte:

/*CSS - app.css*/

.formatTextarea .x-form-field{
    padding:10px;
    border-width: 0px;
}

//nas configs do textarea:

cls:'formatTextarea' 


#3 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 10 July 2016 - 18:52

iso48, o componente é um Text mesmo.

Ext.create('Ext.window.Window', {
                  title: 'Hello',
                  autoShow: true,
                  height: 200,
                  width: 400,
                  layout: 'fit',
                  items: {
                             xtype: 'text',
                             padding: 10,                                                                
                             text: record.get('justificativa') //TEXTO QUE DEVE SER QUEBRADO
                         }
});


#4 iso48

iso48

    Member Avançado

  • Membros
  • PipPipPip
  • 60 posts

Postado 11 July 2016 - 12:23

Marcelo, só para ter a certeza, o componente que pretende utilizar dentro da window é um componente draw? Correto?

 

http://docs.sencha.c...i/Ext.draw.Text

 

 

Se for o caso, o que pretende é capaz de ser um pouco mais complicado:

 

Tente encontrar uma solução com:

style: {
     padding: '10px' //só para testar a config
} 

Outras soluções:

  • poderá utilizar uma tpl, tmbém possivel neste componente;
  • se for possivel no seu caso, utilize um displayfield que é mais versátil;
  • ou apenas um 'label'; exprimente mudar o xtype de 'text' para 'label' e verá que é logo efetuada a quebra da linha quando o texto tem tamanho superior à largura do campo.


#5 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 12 July 2016 - 07:59

iso48, tentei usar tanto o label quanto o displayfield, mas ambos, não efetuaram quebra de linha.



#6 iso48

iso48

    Member Avançado

  • Membros
  • PipPipPip
  • 60 posts

Postado 12 July 2016 - 09:51   Melhor Resposta

Viva Marcelo,

 

Penso que o que poderá estar a ocorrer é que está a testar o campo escrevendo uma unica palavra com muitos caracteres (20, 30...). Isto nunca funcionará porque a quebra da linha vai ser efectuada no espaço entre as palavras e não no meio de uma palavra. Tente testar com um texto com várias palavras.

 

Errado:

Eyudrwedtgewuewsdhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

 

CERTO:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis erat lacus, malesuada non laoreet id, mattis et massa. 


  • Marcelo Augusto curtiu isso

#7 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 13 July 2016 - 08:52

olá iso48,

 

O fato de eu ter colocado uma única "palavra" era o problema também. Antes de ver sua resposta eu tinha conseguido fazer da seguinte forma:

Ext.create('Ext.window.Window', {
                            title: 'Justificativa',
                            modal: true,
                            autoShow: true,
                            height: 200,
                            width: 400,
                            layout: 'fit',
                            items: {
                                xtype: 'container',
                                maxWidth: 400,
                                margin: 10,
                                html: record.get('justificativa')
                            }
                        });

Coloquei dentro de um container e ele quebrou; mas como você relatou, se tiver uma única palavra, sem espaços, a quebra não é feita. De qualquer forma, muito obrigado pela ajuda.



#8 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 13 July 2016 - 09:32

Outra possível solução pode ser vista aqui https://fiddle.sench.../#fiddle/1di1 



#9 iso48

iso48

    Member Avançado

  • Membros
  • PipPipPip
  • 60 posts

Postado 14 July 2016 - 15:36

Olá, ainda bem que conseguiu resolver.

O Extjs é complexo e repleto de pormenores






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

0 membros, 0 visitantes, 0 membros anônimos