ExtJS 4: Como Mostrar uma Página da Internet em um Componente ExtJS
Ei pessoal,
Post com uma dica rápida hoje!
Às vezes queremos mostrar uma página da internet em um componente da nossa aplicação. No post de hoje vou mostrar como fazer isso. Vamos utilizar o componente Window para isso.
Existem duas maneiras para se fazer isso. A primeira solução é mais feia. É colocar um iFrame como conteúdo da config html do componente. A segunda, bem melhor e mais elegante, é usar a extensão iFrame do ExtJS, que pode ser encontrada dentro da pasta examples/ux do SDK do ExtJS 4.
Vou mostrar o códido das duas para vocês, mas super recomendado que você utilize a segunda solução. No final o resultado será o mesmo:
iFrame dentro da config HTML:
Ext.create('Ext.window.Window', {
title: 'Blog!',
height: 500,
width: 500,
layout: 'fit',
autoScroll: true,
html: "<iframe src='http://loiane.com' height=100% width=100%></iframe>",
renderTo: Ext.getBody(),
autoShow: true
});
Extensão Ext.ux.IFrame
Ext.create('Ext.window.Window', {
title: 'Blog!',
height: 500,
width: 500,
layout: 'fit',
autoScroll: true,
items: [{
xtype: 'uxiframe',
src: 'http://loiane.com'
}],
renderTo: Ext.getBody(),
autoShow: true
});
Resultado:
Bons códigos! 
Loaine,
Parabéns estou acompanhando seu trabalho e estou gostando muito, parabéns pela iniciativa.
Precisamos de pessoas com conhecimento igual a você que compartilhem o que sabe. Sucesso sempre.
Beijos
Show!
Muito boa a dica!
Obrigado, estava precisando de algo do tipo.
Abraços,
Eder
Muito Legal! eu tenho uma sugestão seria legal mostrar este exemplo no Architect.
Nesse exemplo, como faço para enviar um post para dentro desse iframe?
Oi Everton,
Basta colocar a url do post no iframe.
[]‘s
This post saved lot of time. Nice example.