1. #1
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default Image panel

    Image panel


    Hi there,

    is there a possibility, to create a window, which shows an image(tif). I know that "workaround" with the html image tag, but I am interested in a component which was made for viewing images.

    Thx
    Chriz

  2. #2
    Ext User shibubh's Avatar
    Join Date
    Jul 2007
    Location
    Lamahi,Dang Nepal
    Posts
    449
    Vote Rating
    0
    shibubh is on a distinguished road

      0  

    Default


    @ chrizmaster
    use this

    this code is from the article http://extjs.com/learn/Tutorial:Crea...ew_UI_controls by Animal



    Code:
    Ext.ux.Image = Ext.extend(Ext.Component, {
        autoEl: {
            tag: 'img',
            src: Ext.BLANK_IMAGE_URL,
            cls: 'tng-managed-image'
        },
     
    //  Add our custom processing to the onRender phase.
    //  We add a ‘load’ listener to our element.
        onRender: function() {
            Ext.ux.Image.superclass.onRender.apply(this, arguments);
            this.el.on('load', this.onLoad, this);
        },
     
        onLoad: function() {
            this.fireEvent('load', this);
        },
     
        setSrc: function(src) {
            this.el.dom.src = src;
        }
    });
    use this component
    i hope this could help you
    Shibu Bhattarai

    Use JavaScript beautifier to beautify you code http://jsbeautifier.org/

    Code Conventions http://javascript.crockford.com/code.html

    ExtJS Core Manual http://extjs.com/products/extcore/manual/

  3. #3
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    omg, i know this is a stupid question, but how do i use this component? I tried calling setSrc, but got a message which says it's not a function.
    I want to add this component to a window.

    Also I want to view tif images if possible.

    thx

  4. #4
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Post


    Quote Originally Posted by chrizmaster View Post
    omg, i know this is a stupid question, but how do i use this component? I tried calling setSrc, but got a message which says it's not a function.
    I want to add this component to a window.

    Also I want to view tif images if possible.

    thx
    @chrizmaster -- With a slight modification to the previous ux,

    Code:
    Ext.ux.Image = Ext.extend(Ext.BoxComponent, {
    
        url  : Ext.BLANK_IMAGE_URL,  //for initial src value
    
        autoEl: {
            tag: 'img',
            src: Ext.BLANK_IMAGE_URL,
            cls: 'tng-managed-image'
        },
    
       initComponent : function(){
             Ext.ux.Image.superclass.initComponent.call(this);
             this.addEvents('load');
       },
     
    //  Add our custom processing to the onRender phase.
    //  We add a ‘load’ listener to our element.
        onRender: function() {
            Ext.ux.Image.superclass.onRender.apply(this, arguments);
            this.el.on('load', this.onLoad, this);
            if(this.url){
                this.setSrc(this.url);
            }
        },
     
        onLoad: function() {
            this.fireEvent('load', this);
        },
     
        setSrc: function(src) {
            this.el.dom.src = src;
        }
    });
    a simple implementation could look like this:

    Code:
    var previewWin = new Ext.Window({
        title  : 'Preview',
        width  : 400,
        height : 600,
        items : new Ext.ux.Image ({ id: 'imgPreview', url: 'someFunky.tiff' })
    });
    previewWin.show();
    
    //then later:
    previewWin.getComponent('imgPreview').setSrc('assets/somethingElse.jpg');
    Last edited by hendricd; 19 Mar 2009 at 3:28 AM. Reason: Change to BoxComponent, and added initComponent
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5
    Ext User nikatwork's Avatar
    Join Date
    Nov 2007
    Location
    Australia
    Posts
    6
    Vote Rating
    0
    nikatwork is on a distinguished road

      0  

    Default


    Big ups for the code shibubh & hendricd! This works a treat.

  6. #6
    Ext JS Premium Member watrboy00's Avatar
    Join Date
    Aug 2007
    Location
    Minneapolis, MN
    Posts
    473
    Vote Rating
    0
    watrboy00 is on a distinguished road

      0  

    Default


    You could also register and xtype for the Ext.ux.Image...

    Code:
    Ext.ux.Image = Ext.extend(Ext.Component, {
    
        url  : Ext.BLANK_IMAGE_URL,  //for initial src value
    
        autoEl: {
            tag: 'img',
            src: Ext.BLANK_IMAGE_URL,
            cls: 'tng-managed-image'
        },
     
    //  Add our custom processing to the onRender phase.
    //  We add a ‘load’ listener to our element.
        onRender: function() {
            Ext.ux.Image.superclass.onRender.apply(this, arguments);
            this.el.on('load', this.onLoad, this);
            if(this.url){
                this.setSrc(this.url);
            }
        },
     
        onLoad: function() {
            this.fireEvent('load', this);
        },
     
        setSrc: function(src) {
            this.el.dom.src = src;
        }
    });
    Ext.reg('image', Ext.ux.Image);
    another simple implementation could look like this:

    Code:
    var previewWin = new Ext.Window({
        title  : 'Preview',
        width  : 400,
        height : 600,
        items : [{ id: 'imgPreview', url: 'someFunky.tiff', xtype: 'image' }]
    });
    previewWin.show();
    
    //then later:
    previewWin.getComponent('imgPreview').setSrc('assets/somethingElse.jpg');
    Eric Berens
    Intranet Systems Manager @ Best Buy
    You should follow me on twitter here.

  7. #7
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    would be nice, buthave you ever tried to set a tif image visible in a extjs window using a plugin like alternatiff? on the way, you prefer to do it, you will have no luck

    Chriz

  8. #8
    Sencha User chrizmaster's Avatar
    Join Date
    Feb 2009
    Location
    Australia
    Posts
    441
    Vote Rating
    1
    chrizmaster is on a distinguished road

      0  

    Default


    Hey again,

    I found a (maybe dirty) way to show tif's in a Ext.window.

    PHP Code:
    Ext.onReady(function(){

    var 
    tifWindow= new Ext.Window({
        
    title  'Showing tifs',
        
    width  400,
        
    height 600,
        
    html '<iframe src="test.tif" style="border:0px #FFFFFF none;" name="" scrolling="auto" frameborder="0" align=aus marginheight="0px" marginwidth="0px" height="560" width="380"></iframe>'
    });
    tifWindow.show();
    }); 
    This one should also work for pdf files and stuff like that

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    The code in the tutorial has been updated to have a setSrc method.

    chriz, Best use

    Code:
    Ext.onReady(function(){
    
    var tifWindow= new Ext.Window({
        title  : 'Showing tifs',
        width  : 400,
        height : 600,
        bodyCfg: { tag: 'iframe' src: 'test.tif', style: "border:0px none;"},
        autoScroll: true
    });
    tifWindow.show();
    });
    You could even poke in a setSrc method which would update this.body.dom.src

    Read the API docs for Panel. See the bodyCfg config.

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    kieliefie is on a distinguished road

      0  

    Question


    I wanna know is there a way to show multi-page tiff in browsers, without control like alternatiff?
    Seems that all the ways you offer still can't show multi-page tiff?