How the Ext 1.0 Alpha release impacts your code
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)
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
http://www.yui-ext.com/forum/viewtopic.php?p=12614#12614
.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
...
.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;
}
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.
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.
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();
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.
* 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
* 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
0.40 Alpha Code:
tb.addButton({text: 'My Button', click: myFunction})
1.0 Alpha Code:
tb.addButton({text: 'My Button', handler: myFunction})
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.
for example:
onActivate.unsubscribe(fn);
has to be replaced with
un("activate",fn);
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.
- 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
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.
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.
#If you have any other info about this subject , Please add it free.# |
