PDA

View Full Version : How the Ext 1.0 Alpha release impacts your code



tryanDLS
19 Feb 2007, 9:29 AM
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

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)

Belgabor
19 Feb 2007, 9:36 AM
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: )

reignman
19 Feb 2007, 9:42 AM
how to exchange the unsubcribe method

for example:


onActivate.unsubscribe(fn);

has to be replaced with


un("activate",fn);

jack.slocum
19 Feb 2007, 11:02 AM
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:


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:



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:



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

jack.slocum
19 Feb 2007, 11:45 AM
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.

Belgabor
19 Feb 2007, 1:17 PM
More about grid paging:
http://www.yui-ext.com/forum/viewtopic.php?p=12614#12614

Wolfgang
19 Feb 2007, 2:36 PM
When using a TreePanel with animation, change animate to animateX



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.

Wolfgang
19 Feb 2007, 2:46 PM
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)



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.

Belgabor
19 Feb 2007, 2:49 PM
Everything works well for me with animate...

tryanDLS
19 Feb 2007, 3:32 PM
If you are having problems with animate, can you check that your includes match #1 in the first post in this thread?

Wolfgang
20 Feb 2007, 1:54 AM
If you are having problems with animate, can you check that your includes match #1 in the first post in this thread?

You are right. I use the seperate debug versions of YUI 0.12.2 instead of yui-utilities.js and also ext-yui-debug.js.
I have to double check and after that i will update my previous postings.

//EDIT
Confirmed. Using the files as described in include-order.txt without any debug version of YUI, this problem does not occur.

aconran
20 Feb 2007, 12:03 PM
When adding a button to a toolbar the click config attribute has been changed to handler.

0.40 Alpha Code:

tb.addButton({text: 'My Button', click: myFunction})

1.0 Alpha Code:

tb.addButton({text: 'My Button', handler: myFunction})

af040
27 Feb 2007, 9:30 AM
In Ext 1.0 alpha, you may also need to change:

The YAHOO.ext.EventObject method findTarget(String className, [String tagName]) to

Ext.EventObject.getTarget([String selector], [Number/String/HTMLElement/Element maxDepth], [Boolean returnEl])

And since the parameters for findTarget have been dropped in favour of the Ext.DomQuery "simple selector", you will likely need to change to something like:


var t = e.getTarget('a');
var t = e.getTarget('div.some-class');
var t = e.getTarget('#some-id');
var t = e.getTarget('.some-class');
vat t = e.getTarget('span:first-child');
Though I am just starting to work with simple selectors, and haven't tested these.

af040
27 Feb 2007, 10:21 AM
To apply one of the Ext 1.0 themes, you include the appropriate css file [ytheme-gray.css | ytheme-vista.css | ytheme-aero.css], after loading ext-all.css


<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ytheme-aero.css" />
Previously, all themes were found in yui-ext.css, and a theme was applied by adding the theme style to the body tag, this is no longer necessary, as the new themes overide the necessary css rules in ext-all.css using the cascade instead of rule selectors.

I would guess that in future 1.0alpha revisions the naming convention for these themes may change to something like x-theme-aero.css or ext-aero.css

af040
27 Feb 2007, 10:35 AM
I forgot to mention in my last post, that if you were previously overridding ytheme css with rules such as:


.ytheme-gray .ylayout-collapsed-west {
background-image:url(../navigation.gif);
background-repeat:no-repeat;
background-position: +0px +30px;
}
then, these should drop the ytheme class selector and just rely on over-riding the theme css by ensuring the following load after the theme css file:


.x-layout-collapsed-west {
background-image:url(../navigation.gif);
background-repeat:no-repeat;
background-position: +0px +30px;
}

dbadke
5 Mar 2007, 1:44 PM
Some CSS changes to the toolbar which caused me problems:

- CSS class x-tb-button-disabled is gone, use x-item-disabled instead.

- When passing the CSS class to toolbar.addButton, the property name is now 'cls', not 'className'.

- When passing the CSS class to toolbar.addButton, you must include the x-btn-icon CSS class (e.g. cls: 'x-btn-icon my-btn-css', not cls: 'my-btn-css') - failing to include it will cause all sorts of weirness. If you want a text + icon button, use x-btn-text-icon.

- Also see thread http://www.yui-ext.com/forum/viewtopic.php?p=15614

dbadke
6 Mar 2007, 9:00 AM
Moving from a .40 grid displaying array data to a 1.0 alpha2 grid confused me for a while. My grid was set up initially, and later loaded with new data, replacing the old data.

Old (.40) way uses the DefaultDataModel:


// Setting up the grid.

var dataModel = new YAHOO.ext.grid.DefaultDataModel(dataArray);
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Title", width: 240, sortable: true},
{header: "Score", width: 40, sortable: true},
]);
var resultGrid = new YAHOO.ext.grid.Grid('my-grid-element',
{dataModel: dataModel,
colModel: colModel});
resultGrid.render();

... later ... dataArray has all new values ...

// Loading new data into the grid.
// Need to remove the old rows first,
// but do not need to refresh the grid.

dataModel.removeAll();
dataModel.addRows(dataArray);


New (1.0) way, using data.Store, MemoryProxy, ArrayReader:


// Setting up the grid.

var dataModel = new Ext.data.Store({
proxy : new Ext.data.MemoryProxy(dataArray),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'title'},
{name: 'score'}
])});
dataModel.load();
var colModel = new Ext.grid.DefaultColumnModel([
{header: "Title", dataIndex: 'title', width: 240, sortable: true},
{header: "Score", dataIndex: 'score', width: 40, sortable: true},
]);
var resultGrid = new Ext.grid.Grid('my-grid-element',
{ds: dataModel, // 'dataModel' becomes 'ds'
cm: colModel}); // 'colModel' becomes 'cm'

... later ... dataArray has all new values ...

// Loading new data into the grid.
// DO NOT need to remove the old rows first;
// the 'false' parameter causes loadData to clear the grid.
// Do have to refresh the grid, though.

dataModel.loadData(dataArray, false);
resultGrid.getView().refresh();

SteveEisner
8 Mar 2007, 11:27 PM
I'm just going through a conversion from 0.33 to 1.0alpha3. After applying the changes mentioned previously, many things still needed to be converted. Here's my list so far (only 1/2 way done with the conversion)

* getEls('some selector'): When I tried to convert this to Ext.select('some selector') it didn't work. I converted to Ext.get(document.body).select('some selector') and that seemed to work better. I usually use it as <element>.select

* My code was:

el.load(url, null, this.myLoadFinished.createDelegate(this, [callback], true));
...
myLoadFinished: function(el, success, callback) {
and I had to change it to

myLoadFinished: function(el, success, response, callback) {
(added "response" parameter.) So it looks like the number of parameters on the el.load callback has changed?

* layout.getRegion('north).resizeTo(X) <-- no longer seems to work. Haven't yet found a workaround. The element inside the region/activePanel gets resized, but the layout does not change its on-screen height.

* The scrollbars disappeared from my center region - IE only. When I figure this out I'll edit this if it's a source behavior change, or else just file a bug.

I'll add more as I get further into the conversion!

Steve

mystix
1 Apr 2007, 8:32 PM
new on Ext 1.0 beta 1:

Ext.fly('element-id').dom can no longer be used to check for existence of DOM elements. Ext.fly('element-id') will now correctly return null when the searched-for element does not exist in the DOM.

corey.gilmore
3 Apr 2007, 11:31 AM
I'm migrating from yui-ext 0.33 to Ext 1.0b and had a problem where a NestedLayoutPanel wasn't updating properly until after I resized the window or called layout(). It turns out this was the culprit:


this.innerLayout.restoreState();
this.innerLayout.endUpdate(true);
YAHOO.legdb.LegDB.layout.endUpdate();

It seems in yui-ext 0.33 the parameter to endUpdate was ignored, or layout() was triggered another way. I haven't dug around at all, but changing the call to this.innerLayout.endUpdate() to not disable a layout call fixed my problems.