Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: How the Ext 1.0 Alpha release impacts your code

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default How the Ext 1.0 Alpha release impacts your code

    First, realize that this is still alpha code and not completely documented. Some of the examples may not yet work. If this scares you, or you don't want to be a guinea pig, by all means, stay with the .33 code base until we get a little further along in the release cycle.

    This isn't a bug tracking thread, we'll start something for that.

    In this thread, I'll try to keep a running list of things that you need to change. If you come across stuff I haven't included yet, please reply, and I'll update this message. Note that these may not all be breaking changes - some are handled by the compat file. So without further ado, here's the (start of the) list.

    1. Change your include files per include-order.txt.
    **** All Alpha 1 releases uses this ordering
    yui-utilities.js
    ext-all.js (or core)
    ext-bridge-yui.js
    and optionally, ext-back-compat.js (Note this file is considered broken. You may need to experiment if you need to use it.)

    **** Alpha 2 releases have been updated to use this order
    yui-utilities.js or jquery.js
    ext-yui-adapter.js or ext-jquery-adapter.js
    ext-all.js (or core)


    2. Replace yui-ext.css with ext-all.css.
    Change Ext CSS entries in your code/html. The 'y' prefix is replaced with 'x-'. For example, 'ydlg' becomes 'x-dlg' and 'ylayout-inactive-content' becomes 'x-layout-inactive-content'.

    3. Replace 'YAHOO.ext.' with 'Ext.'

    4. getEl is now Ext.get. There may be a compat entry for this in the next build.

    5. If you were using the previously deprecated events with the subscribe method, you need to change them to use the new syntax. For example
    Code:
    tab.onActivate.subscribe(myHandler, myObj, true) should be
    tab.on('activate', myHandler, myObj, true)   //  on is shorthand for addListener
    //and
    onActivate.unsubscribe(myHandler) should be
    un('activate', myHandler)    // un is shorthand for removeListener
    Refer to this thread for more about the event changes http://www.yui-ext.com/forum/viewtopic.php?t=2520 - it's not necessarily all inclusive, but it will give you an idea of what's being changed and why

    6. Grid column css is now automatically generated. No need to define empty column definitions. That means no more CSS entries for each column of each grid
    e.g #myGrid1 .ygrid-col-0, #myGrid1 .ygrid-col-1, #myGrid2 .ygrid-col-0, etc
    The columns get ids instead of indexes. e.g..
    .ygrid-col-0 is now .x-grid-col-0 (by default) or you can give your column an id and it will be that id:
    See Jack's post further down in this thread for more examples of grid CSS.

    =====
    Shortcuts. You don't have to make all these changes right away - they're covered for now in the compat.js file. Changing these as you go will at some point allow you eliminate compat.js

    a) YAHOO.ext.EventManager.onDocumentReady(..) is now Ext.onReady(...)
    For example Ext.onReady(Example.init, Example, true);
    b) YAHOO.extendX is now Ext.extend
    Ext.util.Config.apply = Ext.apply
    YAHOO.namespaceX is now Ext.namespace
    c) The Ext.util.Browser shortcuts are now on Ext (for example Ext.isIE)

  2. #2

    Default

    Don't forget to update the css link from yui-ext.css to ext-all.css (Talking from major wtf-is-wrong-headache-experience here :wink: )

  3. #3

    Default

    how to exchange the unsubcribe method

    for example:

    Code:
    onActivate.unsubscribe(fn);
    has to be replaced with

    Code:
    un("activate",fn);

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Grid column css is now automatically generated. No need to define empty column definitions. The columns get ids instead of indexes. e.g..

    .ygrid-col-0 is now .x-grid-col-0 (by default) or you can give your column an id and it will be that id:
    Code:
    var cm = new Ext.grid.ColumnModel([{
               id: 'topic',         <-- assign id
               header: "Topic",
               dataIndex: 'title',
               width: 420,
               ...
    The css rule for that column would be:

    .x-grid-col-topic

    Also, you can specify alignment in the config:

    Code:
    var cm = new Ext.grid.ColumnModel([{
               id: 'topic',       
               align:'right', <-- right alignment
               ...
    Even more powerful, you can now include custom css that get included in the generated css rule for that column:

    Code:
    var cm = new Ext.grid.ColumnModel([{
               id: 'topic',       
               css:'white-space:normal;font-weight:bold;', <-- custom css rules
               ...

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Here's a big one, loading paged data is completely different:

    Old way:

    dm.loadPage(1);

    New way:

    ds.load({params: {start 0, limit: 25}});

    Your server side code will get the params. Why the new syntax you may ask? Well, obviously there are many more parameters it can support, including custom return parameters. The primary reason though was to leave it up to the proxy to determine how to process the parameters and move it out of the data store.

  6. #6

  7. #7
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482

    Default Treepanel use animateX

    When using a TreePanel with animation, change animate to animateX

    Code:
    mytree = new Ext.tree.TreePanel("treePanelContainer", {animateX:true, containerScroll: true, rootVisible: true });
    //EDIT
    My fault. Using the files as described in include-order.txt this problem does not occur.

  8. #8
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482

    Default When using Borderlayout change animate to animateX

    When using Borderlayout change animate to animateX as well (so it sems that it affects any usage of animate. Note: that happens also to Borderlayout used in the the examples folder of Ext)

    Code:
    west: {
                                split:true,
                                initialSize: 200,
                                minSize: 175,
                                maxSize: 400,
                                titlebar: true,
                                collapsible: true,
                                //animate: true
                                animateX: true
    //EDIT
    My fault. Using the files as described in include-order.txt this problem does not occur.

  9. #9

    Default

    Everything works well for me with animate...

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    If you are having problems with animate, can you check that your includes match #1 in the first post in this thread?

Page 1 of 2 12 LastLast

Similar Threads

  1. Ext JS 3.1 FINAL Available
    By jack.slocum in forum Community Discussion
    Replies: 120
    Last Post: 6 Jul 2009, 4:32 PM
  2. Drag & Drop broken in Safari (Alpha 1 and Alpha 2)
    By maerteijn in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 27 Feb 2007, 8:26 AM
  3. Examples in the Alpha Release are broken.
    By jack.slocum in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 19 Feb 2007, 10:01 AM
  4. Release Update - Code and Screenshot added
    By jack.slocum in forum Community Discussion
    Replies: 17
    Last Post: 15 Feb 2007, 1:59 PM
  5. .40 alpha code?
    By jason in forum Community Discussion
    Replies: 4
    Last Post: 14 Jan 2007, 10:16 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •