ContactDetailView ...


I'm trying to create a ContactDetailView, like the one in 13:52 min of this video presentation.


I tried with a little mock up using FittableColumns to have both {Image+Name} in one row.
http://jsfiddle.net/simple2k/uFpRE/

I'm not sure what param/style should be used to make the image size to be same as Name field and make it fit nicely.

Any suggestion or link to sample code does similar styling?

Thanks.

Comments

  • edited March 2013
    You could set the "height" on the image to an explicit size (maybe 128px or so), which is the easiest solution. Alternatively, you can get the height of the groupbox after it's rendered, and apply that to the thumbnail.
    Do something like this in your app's "rendered" function:
    rendered: function() {
            var b = this.$.groupbox.getBounds();
            this.$.thumbnail.setBounds({height: b.height});
            this.$.fittableColumns.resized();
    }
    
    
    Link to modified fiddle: http://jsfiddle.net/mbessey/eW8Qt/
    Oops. I originally said to call reflow(), but it's protected. Call resized() instead.
  • Thanks mbessey, it works.
    Just curious, in the setBounds method, you are setting only the height, how come, the width also fits nicely ?.
  • edited March 2013
    That's a characteristic of the <IMG> tag that the Image kind uses. If you set *either* the height or the width, it sizes proportionately. If you set both, then it stretches to fit the given dimensions.
Sign In or Register to comment.