Hybrid View

  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
    Ext User dudecool's Avatar
    Join Date
    Nov 2007
    Location
    Bangalore, Karnataka, India
    Posts
    26
    Vote Rating
    0
    dudecool is on a distinguished road

      0  

    Default


    Hello Makana, I am unable to read the contents of the file, looks like some encypted file?
    Regards,
    Jayaveer.B
    http://gallery.jayaveer.com/

  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


    No, it's a normal UTF-8 encoded javascript file within a ziparchive (created with 7zip).
    Don't use IE to download the file, since it has problems in downloading the gzipped attachments in vbulletin.
    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


    I think that a "refresh"-function for the SQLiteStore would be good. Like described in this thread, an insert can create values in the database-file which are not present in the store (like the id in that case). How can I "synchronize" the data from the database to the store, without using the load function? Cause using the load-function would fire the load event, which would call some unwanted commands...

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


    Like described in this thread I'm going to review the sqlite stuff, including the store of course...
    I'm also going to work on all the other classes and add some comments in it, to create a ext-doc of this adapter...

    I've started some work yesterday, but it isn't ready yet...

    I was thinking about autoupdate a record's id, when it is inserted in the database. It should fix your problem, which is IMO also an issue of many other users.

    There are also plans to include AirViewport (the extish look and feel of air windows) and some other helpful stuff...
    I started with it yesterday and will do it during the next days. But be careful: "next" can be more than a few it's all freetime...

    And now a German word to you: Mahlzeit!
    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