1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

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

    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.
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


    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:
    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

  3. #3
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    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...
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    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.
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


    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...

  7. #7
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    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...
    Last edited by makana; 10 Feb 2010 at 6:45 AM. Reason: defining an instance of XTemplate for viewTemplate
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  9. #9
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


    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
    			}
    		});

  10. #10
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Germany
    Posts
    330
    Vote Rating
    1
    PranKe01 is on a distinguished road

      0  

    Default


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