ExtJS 4: Como Mostrar uma Página da Internet em um Componente ExtJS

20/08/2012 | By

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:

extjs4 iframe loiane ExtJS 4: Como Mostrar uma Página da Internet em um Componente ExtJS

Bons códigos! icon smile ExtJS 4: Como Mostrar uma Página da Internet em um Componente ExtJS

Filed in: Ext JS 4 | Tags: ,

Comments (7)

  1. 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

  2. Show!
    Muito boa a dica!

  3. Eder

    Obrigado, estava precisando de algo do tipo.

    Abraços,

    Eder

  4. Muito Legal! eu tenho uma sugestão seria legal mostrar este exemplo no Architect.

  5. Everton Lopes Cardoso

    Nesse exemplo, como faço para enviar um post para dentro desse iframe?

  6. Pavi

    This post saved lot of time. Nice example.