1. #1
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Arrow Ext.ux.PrinterFriendly

    Ext.ux.PrinterFriendly


    Hey,

    I'm happy to announce the first release of my (first) Ext JS extension.
    Here are the facts:

    Name
    Ext.ux.PrinterFriendly

    Summary
    Easily build printer friendly layouts and grids for your Ext JS pages.
    Works for Ext JS 3.3.0.
    (Previous versions were also supported, check the commit logs, to get older versions that work with Ext JS 2.0 - 3.2.1.)

    Features
    • Builds a normal html table (Ext.ux.PrinterGridPanel) based on your data store and column model, which saves a lot of cpu power and memory when printing large data sets. Moreover it shows all rows. (Remember, you can't use ext's pagination or scrolling on paper. ;-))
    • Remembers the state of your grid, such as that hidden columns stay hidden in printer friendly view, keep their column order and keep the row sorting. (This is not really a feature of this extension, it just uses the fabulous Ext.state.Manager, but I think it's important to mention, since this was an important requirement for me.)
    • Completely Javascript-driven, no need for extra server-side coding for printer friendly pages
    • Enables easy debugging of your printer-friendly layout (just add ?format=printerfriendly to your page url to see printer friendly view)
    • Enables adding your custom stylesheet for your printer-friendly format
    • Grouping View and Store support (New)

    Source
    http://github.com/steffen/ext.ux.pri...ly/tree/master
    If you don't have git, you can download the zip or tar file of the latest version from:
    zip: http://github.com/steffen/ext.ux.pri...zipball/master
    tar: http://github.com/steffen/ext.ux.pri...tarball/master

    Install
    Code:
    <!-- Your Ext JS files -->
    <script type="text/javascript" src="[YOUR PATH]/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="[YOUR PATH]/ext-all.js"></script>
    
    <!-- Ext.ux.PrinterFriendly files -->
    <script type="text/javascript" src="[YOUR PATH]/Ext.ux.PrinterFriendly/config.js"></script>
    <script type="text/javascript" src="[YOUR PATH]/Ext.ux.PrinterFriendly/ext.ux.printerfriendly.js"></script>
    
    <!-- Your page-specific javascript files (with Ext.onReady) -->
    <script type="text/javascript" src="[YOUR PAGE-SPECIFIC JAVASCRIPT FILE]"></script>
    Usage
    See http://www.sencha.com/learn/Extension:PrinterFriendly

    Examples
    See examples folder in root of the repository.

    Feedback
    Any Feedback via comments on this post in this forum or in my blog is welcome!

    I hope you find this extension as useful as I do! :-D

    Regards,
    Steffen

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    65
    Vote Rating
    1
    Hani is on a distinguished road

      0  

    Default


    Looks very useful, but doesnt work on safari

  3. #3
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Quote Originally Posted by Hani View Post
    Looks very useful, but doesnt work on safari
    Hey hani, my bad, I didn't test it on safari nor internet explorer. Only Firefox 2. I just tested it on my Safari 2 (Mac) and the PrinterGridPanel did not show up. I guess that's what you mean with "not working", right? Well, thanks for the hint, I'll check that this weekend!

    Regards,
    Steffen

  4. #4
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    This is a nice idea. Pure HTML rendering is also helpful in SEO caching strategies, which of course is a gaping hole in fully rendered Ext pages. As of right now you need to manually create redundant stupid/simple landing pages for everything that you want cached by the search engines. Saying goodbye to this equals a good thing.

    Best regards,
    Jerry Brown

  5. #5
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Quote Originally Posted by jerrybrown5 View Post
    Pure HTML rendering is also helpful in SEO caching strategies
    Hey Jerry,

    even though SEO would be a good side effect of this extension, I don't think that this extension is actually more SE-friendly. The difference between my PrinterGridPanel class and the official GridPanel class is "only" that the rendering process is less cpu and memory intensive and that the generated html is smaller than with the normal GridPanel.
    BUT, the table/grid is still generated by javascript, and that's still the same problem for search engines, as with the normal GridPanel.
    So if you want to do SE-optimized landing pages, I think you still would have to do extra server-side coding.
    Sorry on disappointing you on that part, or do I look at this the wrong way?

    Regards,
    Steffen

  6. #6
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Steffen,
    You are right in that it would have to tie into a server based solution for which simple html (from javascript creation) is only a part of it. What is needed is a simple server based Ext aware IEBrowser (shdocvw.dll or similar) web bot component to go through a site with a certain querystring to clear the javascript and extract simple and very cacheable html. Alternatively, you could do the same with firefox on a string (XPCOM?). Once you can generate the simple html on command the rest is easy.

    The thee current and not very good choices:
    * Simple Web 1.0 site which is SEO cacheable and steadily lose customers to Web 2.0 sites (not an option)
    * Fully JS rendered Web 2.0 site which is not SEO cacheable and wait on laurels for the SEs to improve (not an option)
    * Double programming (not an option)


    Best regards,
    Jerry

  7. #7
    Ext User
    Join Date
    Jan 2008
    Posts
    7
    Vote Rating
    0
    tyr is on a distinguished road

      0  

    Default


    ... a very interesting extension.
    'PrinterView's are a very usefull feature. I look forward to see more about this ;-)

  8. #8
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Hey Jerry,

    ok, I got it. Combined with your mentioned technologies, this extension really could offer SEOs another option. A good side effect then. :-)

    Regards,
    Steffen

  9. #9
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    España
    Posts
    215
    Vote Rating
    0
    vizcano is on a distinguished road

      0  

    Default


    I'm trying the example provided, and I've seen that if you increase the items of the array it does not print more than one page, is there a way to print more than one page? I've got a huge grid and i'd like to be able to print it, I need at least 3pages to print it

    Thanks

  10. #10
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    770
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    Quote Originally Posted by vizcano View Post
    I'm trying the example provided, and I've seen that if you increase the items of the array it does not print more than one page, is there a way to print more than one page? I've got a huge grid and i'd like to be able to print it, I need at least 3pages to print it

    Thanks
    Hey vizcano,

    did you set the Ext.PRINTER_FRIENDLY_CSS_URL constant in your ux.PrinterFriendly/init.js file? That css is important for exactly your problem.

    Regards,
    Steffen

Similar Threads

  1. PrinterFriendly issue : {column_name}
    By Cedric_K in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 Oct 2010, 1:57 PM

Thread Participants: 76