Ext 3 to 4 Migration

Quote:

---

Originally Posted by sg707

I tried to use Spket and didn't seem to work... ah well... For now, I'm using Aptana w/ ExtJS plugin provided by the community... it's fairly good but it's missing many API. It does not use jsb2 file for that though....

Can someone please respond?? If I can make JavaScript coding less painful, you'll be my hero of the day.

---

Sorry, I really didn't mean to hijack this thread with IDE talk - I was really just interested in whether the .jsb file would be in 4, and that's been answered. I can tell you that Spket works great for me for 2 and 3, though there are some gotchas - having to setup a JavaScript profile and set the default JS editor to be Spket, for example. Maybe someone could make another IDE thread? If you have specific Spket issues with 2-3, I can probably assist.

Quote:

---

Originally Posted by firefoxSafari

Maybe someone could make another IDE thread?

---

Thank you, I was just about to suggest the same thing. While this is important to some folks, it's not really pertinent to migrating code from Ext 3 to 4.

Cool~ I've created separate thread on

http://www.sencha.com/forum/showthre...117#post572117

Here's an issue I have with grids. My users generally want wrapping similar to a raw html table. The solution to this is well documented in the Grid FAQ for Ext 3.

Code:

---

<style type="text/css">
.x-grid3-cell-inner, .x-grid3-hd-inner { white-space:normal !important; }
</style>

---

It seems that grid css has changed. To get cells to wrap I can use x-grid-cell-inner instead. I do have apps where it was useful to have the headers wrap, though. Is there any way to achieve this in 4? I was hoping I could change x-column-header-inner, but this didn't appear to work.

I have a suggestion for the migration guide. IMHO the faqs are one of the most useful resources on this site. They should be where everyone looks first for answers. Eventually someone should go though these item by item to see if the workarounds etc listed in them still apply to 4 and document this knowledge.

I assume that you're referring to these FAQ's? I'm not sure how much of that would be directly applicable to migrating from 3 to 4, but I'll keep that in mind as we're documenting the migration guide.

Yes, those were the faqs I meant - thanks for considering them. My point is that they contain many solutions to common tasks and if these solutions have changed in 4, then we need to know.

I found another cosmetic gotcha with GridPanel. In the past, you could specify stripeRows as a config option on the GridPanel itself. This has been moved explicitly to the viewConfig with 4 so you have to do something like

Code:

---


      var grid1 = new Ext.grid.GridPanel({
          ...,
          viewConfig: {
              stripeRows: true
          },
          renderTo: Ext.getBody()
      });

---

Also, the style for alternate rows appears to have changed from x-grid3-row-alt to simply x-grid-row-alt. People need to be aware of this if they were overriding the style for alt rows.

And making text in a grid selectable has changed as well.

Code:

---

<style type="text/css">
  .x-selectable, .x-selectable * {
  -moz-user-select: text!important;
  -khtml-user-select: text!important;
  }
 </style>
 

<scripttype="text/javascript">
 <script type="text/javascript"> 
    Ext.grid.TableChunker.metaRowTpl = [
                  '<tr class="' + Ext.baseCSSPrefix + 'grid-row {[this.embedRowCls()]}">',
                      '<tpl for="columns">',
                          '<td class="' + Ext.baseCSSPrefix + 'grid-cell ' + Ext.baseCSSPrefix + 'grid-cell-{id} {{id}-modified} {{id}-tdCls}" {{id}-tdAttr}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner ' + Ext.baseCSSPrefix + 'selectable" style="{{id}-style}; text-align: {align};">{{id}}</div></td>',
                      '</tpl>',
                  '</tr>'
              ];
 
  Ext.grid.View.override({
  cls: Ext.baseCSSPrefix + 'grid-view ' + Ext.baseCSSPrefix + 'selectable'
  });

</script>

---

Last 2 days we tried to migrate from ext3 to ext4 and found several issues(or changes without any documentation in ext4 docs):
1) We can't find any config property for buttonAlign for buttons section for Form/Panel. Now this buttons section transform to special toolbar (fbar) and we can't find how to get this buttons after create panel/form.
2) GridPanel's hideHeaders isn't work. How to hide grid columns headers?
3) UI rendering very slow. Some operations such as hide/show form in rich layout may take 1 second and high load google chrome (but in ext3 this operations work ok).

Also in the Ext4 api docs many inline links have wrong path (link to local server localhost:3000 e.g. http://dev.sencha.com/deploy/ext-4.0...e.Element.html Ext.Fx link).

exactly, agree with the uzver. I spent a few hours of migration is extjs3 extjs4. First of all documentation - not all work, many lack the komponetów mention of plugins. In general, rework my 150 units at this state of things - it's a massacre! So think first wait for ExtJS 3.3.2 - potemna final version 4.1 and can be taken up for anything.