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

    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 - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    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,570
    Vote Rating
    53
    Animal will become famous soon enough Animal will become famous soon enough

      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?