Modified ext-air adapter (improved SQLiteStore, default Templates and more)

Hey guys!

Since ExtJS 3.3.0 the enhanced ext-air adapter is available on the official ExtJS download site.

I modified the original ext-air adapter (3.1.0) to include the following features:

• Ext.DomQuery updated to ExtJS3.1.1 code
• Template fixes for
  
  • Ext.layout.MenuLayout
  • Ext.menu.Item
  • Ext.list.ListView
• Default Templates for
  
  • Ext.form.ComboBox
  • Ext.grid.GroupingView (default startGroup template with support to use groupTextTpl)
• Completely reviewed SQLiteConnection, SQLiteProxy and SQLiteStore
  
  • It is Ext.data.SQLiteDB, Ext.data.SQLiteProxy and Ext.data.SQLiteStore now
  • It uses asynchronous connection now
  • It uses a DataWriter and api to save changes on Records automatically to the database
  • It uses the Store's autoSave config option to define, if these changes should apply automatically or only with the save-method
  • Ext.data.GroupingSQLiteStore available
  • support to connect to encrypted databases (Thanks to PranKe01!)
  • Paging support
  • Inserts and Updates with multiple records are handled within database transactions
• Advanced FileTreeLoader
  
  • extensionFilter can be an array
  • dirOnly config option to only allow directories to be displayed
  • skipNames config option to exclude file/directory names from being displayed
• improved Ext.air.NativeWindow
  
  • feels more like an Ext.Window
  • Ext.air.Viewport: An AirViewport implementation, which gives you the look and feel of Ext.Windows to NativeWindows with systemChrome:none
  • Ext.air.Window: A class to load NativeWindows like Ext.Windows. It accepts config options both from Ext.air.NativeWindow and Ext.air.Viewport and builds up a full window with items, layout etc. in Ext.Window style.
  • fixed Ext.air.Notify bug
  • stackable Ext.air.Notify windows
  • a real native window MessageBox
• extended layer
  
  • approach to let menus, tooltips and layers in general overlap the native window bounds
  • EXPERIMENTAL
• Ext.History override
• CSS to show scrollbars in default ExtJS design
• CSS-only implementation to show checkboxes and radio buttons in default ExtJS design (as it was in ExtJS2.x)
• CSS to avoid the "focus outlines"
• some minor bug fixes

More to come...

Note:
This adapter is for use with ExtJS 3.3.0, but should work with all public ExtJS releases > 3.1.0, too.
There would be no support for ExtJS3.0.x, ExtJS2.x and ExtJS1.x!
It's for use with Adobe AIR 2.0!

Download: ExtJS Download page
Documentation: Online API-Documentation

Please feel free to leave your comments, suggestions, bug reports etc. here! :)


And last but not least, thanks to @murrah, @PranKe01 and @piroman for their contributions and @JamieAvins for his effort to include this adapter in the official extjs release.

Hi makana,

I tried out your air-adapter, because I got following problem: http://www.extjs.com/forum/showthread.php?t=91683 I think that is the problem with the DOMQuery. Did you already submitted the bug?
When using your adapter, I get an error:

Quote:

---

TypeError: Value undefined is not a constructor. Cannot be used with new.

---

On this code:

Code:

---

this.database = new Ext.sql.SQLiteStore({
        dbFile: this.dbfile,
        key: 'ID',
        tableName: 'tbl',
        fields: [
                {name: 'ID', type:'int'},
                ...
        ]
});

---

How do I have to use your SQLiteStore?
And what does that mean: updated Ext.sql.Proxy (specifying "api" to define whether changes to its store should automatically applied to the underlying db, paging support with start/limit parameters) ? Is this the problem I had, where the data is saved to the DB but the store is not updated?

Thanks

I noticed a bug in SQLiteStore's constructor. I always stumple upon Ext.sql.Proxy... I always think, it's Ext.sql.SQLiteProxy.... :-?
I updated the file in the first post.

the "api-thing" is according to the config option api from Ext.data.DataProxy, where you can define separate urls for reading, creating, updating and deleting records.
I used this to specify, if changes to the records should automatically apply to the underlying db. This option splits the previous option "readonly" and requiers boolean values, not urls .
An example how to use Ext.sql.SQLiteStore:

Code:

---

var store = new Ext.sql.SQLiteStore({
        api: { // default: all is true
                read: true,
                create: true, // automatically do a db-insert, if records were added to the store
                update: true, // automatically do a db-update, if records were changed
                destroy: false // DON'T automatically remove records from underlying db, if they were removed from store
        },
        dbFile: 'myFile.db',
        key: 'id',
        fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'}
        ],
        proxy: Ext.ux.MyProxy // (optional) a constructor of a custom proxy (NOT an instance)
});

---

About the DomQuery bug. It's due to new code in ExtJS3.1.1. I included it in the file above.
I didn't report it, but will do it.
But I doubt, that we get a "realtime" updated ext-air package from Ext. I'm a bit disappointed, that not even reported very minor bugs like the removeBy thing from Ext.sql.Table or something like this were included in the "new" ext-air package. Doing a textdiff between the 0.3 and the 3.1 version will show you, that both files are almost the same. new = old... As long as updates/bug fixes for ext-air won't be shipped with new ExtJS releases, i count more on my own air support...

You're right - the Air-support is terrible.

I get it to work now, but there are still some problems. First I had to add the api-object to each store. Otherwise I get an error... Looks like the object is not set by default.

And I got a problem with the GroupingView:

Code:

---

                buf[buf.length] = this.startGroup.apply({groupTextTpl: this.groupTextTpl.apply(g)});

---

In this line I get the error "TypeError: Undefined value", when I want to display a EditorGrid with a groupingview with an own template.
I create it like this:

Code:

---

var gridview = new Ext.grid.GroupingView({
 hideGroupedColumn: true,
 showGroupName: false,
 forceFit: true,
 startCollapsed: true,
 startGroup: groupingTemplate
});

---

Thanks for your air-adapter ;) I think I will use it, when these bugs are fixed!

I fixed the Store api stuff. You now only need to specify the "falses".

I would like to know how your groupingTemplate looks like. As you are speficying it as startGroup, I would think, it contains all the default startGroup stuff. Don't specify a startGroup (or if really needed, one with a string "{groupTextTpl}" inside, take a look at the code). Only define the config option groupTextTpl, like in normal ExtJS outside Adobe AIR and leave the wrapping startGroup-html. It is mentioned in the ExtJS docs how to specify a groupTextTpl.

My XTemplate looks like this:

Code:

---

var viewTemplate = '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Einträge" : "Eintrag"]})';

var groupingTemplate = new Ext.XTemplate(
        '<div id="{groupId}" class="x-grid-group {cls}">',
        '<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div class="x-grid-group-title">', viewTemplate ,'</div></div>',
        '<div id="{groupId}-bd" class="x-grid-group-body">'
);

---

I tried to change "startGroup" to "groupTextTpl", but then the grid looked pretty strange - each group got two pluses :-? And when I tried to use viewTemplate instead of groupingTemplate, it throws an error again...

Found another bug :) The property "startCollapsed: true" of the GroupingView is ignored when I use your adapter ;)

ok, so you have to do:

Code:

---

var viewTemplate = new Ext.XTemplate('{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Einträge" : "Eintrag"]})');

---

before Ext.onReady

and then

Code:

---

var gridview = new Ext.grid.GroupingView({
 hideGroupedColumn: true,
 showGroupName: false,
 forceFit: true,
 startCollapsed: true,
 groupTextTpl: viewTemplate
});

---

startCollapsed should not be a bug of my adapter. I don't touch it...

But you manage some XTemplates. Did you tried to start a groupinggrid with collapsed groups? I changed the line 752 from your code to

Code:

---

        '<div id="{groupId}" class="x-grid-group x-grid-group-collapsed {cls}">',

---

Now they start collapsed. Seems like the marker cls is not correctly written - maybe it's a problem with the combination of your adapter and the ext-all.js...

P.S. I tried out the new version and now I get an error, when I set the api in the SQLiteStore:

Code:

---

database = new Ext.sql.SQLiteStore({
                        dbFile: this.dbfile,
                        key: 'ID',
                        tableName: 'tbl',
                        fields: [
                                {name: 'ID', type:'int'},
                                ...
                        ],
                        api: {
                                read: true,
                                create: true,
                                update: true,
                                destroy: true
                        }
                });

---

By the way - maybe you would like to add this to your adapter: http://www.extjs.com/forum/showthread.php?t=28464