1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      2  

    Default Grid filtering using Sencha Architect

    Grid filtering using Sencha Architect


    Hi,

    As many other people I am trying to implement the grid filtering using this plugin:

    http://www.sencha.com/blog/extended-...n#comment_form

    That comes in the examples of ExtJS4.1 inside "ux".

    There is an example of that working:

    http://dev.sencha.com/deploy/ext-4.0...ter-local.html

    But as most of the examples it doesn't use MVC or Sencha Architect.

    I tried to use it in Sencha Architect in the last version, that is: 2.1.0 build 637.

    I found some problems:
    1. I am using groupingfeature and summaryfeature so I already have a "features" configuration for the grid, plus it is read-only, I just can add the components that are available. Filtering is none of them.
    2. After adding the
      Code:
      requires: [
              'Ext.ux.grid.FiltersFeature'
          ],

    I had to copy the ux folder in my application so now the application finds the javascript required and loads the application.
    appstructure.png

    According to the example, the way to add the filtering to a grid is like the following:

    Code:
    var filters = {
            ftype: 'filters',
            // encode and local configuration options defined previously for easier reuse
            encode: encode, // json encode the filter query
            local: local,   // defaults to false (remote filtering)
            filters: [{
                type: 'numeric',
                dataIndex: 'id'
            }, {
                type: 'string',
                dataIndex: 'company',
                disabled: true
            }, {
                type: 'numeric',
                dataIndex: 'price'
            }, {
                type: 'date',
                dataIndex: 'date'
            }, {
                type: 'list',
                dataIndex: 'size',
                options: ['small', 'medium', 'large', 'extra large'],
                phpMode: true
            }, {
                type: 'boolean',
                dataIndex: 'visible'
            }]
        };
    Then in the grid we can add the feature:
    Code:
    var grid = Ext.create('Ext.grid.Panel', {
            border: false,
            store: store,
            columns: createHeaders(4),
            loadMask: true,
            features: [filters],
            bbar: Ext.create('Ext.toolbar.Paging', {
                store: store
            })
        });
    But using Sencha Architect, you cannot add the filtering feature in the code (unless you override) without creating your own "property" then you will have a duplicated property if you use groupingfeature or summaryfeature,etc.

    gridproblem.png

    Moreover, you cannot add the feature from Sencha Architect:

    gridproblem1.png

    So, what should I do to make the filtering feature to work using Sencha Architect, how can you use any UX component from Sencha Architect ?

    A tutorial in the "learn" section (sencha.com) would be nice.

    Any comment about this will be welcome.

    Thanks in advance.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,247
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by iplanit View Post
    So, what should I do to make the filtering feature to work using Sencha Architect, how can you use any UX component from Sencha Architect ?
    Use an override to add the additional feature. Anytime that there is a custom thing/user extension that is not included out of the box with Architect you can always add it by adding the appropriate JS Resources and adding it via an override and/or event handler.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      1  

    Default


    Hi aconran,

    Thanks for your prompt reply.

    Would you be able to provide me with an example for this specific case? As a rule I would not need to ask. However I think it is something common that people are encountering.

    Also, I think that it should be something that you can achieve with Sencha Architect without needing to override. Or am I missing something?







    By adding the appropiate JS Resource you mean adding a new resource or adding the "requires" to the Application in Sencha Architect ?

    If I override I get the following code:
    Code:
    Ext.define('MyApp.view.override.gridscreen', {
        override: 'MyApp.view.gridscreen'
        
    });
    Your suggestion is to add the code like in the example -see the code above-,
    then put my features property using the filters ?

    Sencha Architect is for developers, not advanced users... imho, and as a developer, I can say that if it is supposed to be so easy I think should documentation should exist to add all this ux features that are very nice and widely used (as you do in your examples without using Sencha Architect).

    Maybe there is some documentation on the topic that I am missing that illustrates how to solve it. Point me to it if that is the case.

    I will appreciate additional information, as I am new to Sencha Architect and ExtJS4, and if some tutorial is made and put online other users will definitively find it very useful.

    Thanks for your support.

    Quote Originally Posted by aconran View Post
    Use an override to add the additional feature. Anytime that there is a custom thing/user extension that is not included out of the box with Architect you can always add it by adding the appropriate JS Resources and adding it via an override and/or event handler.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,247
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    If you are only using standard Ext JS/Sencha Touch components (no overrides), you will be able to create everything without dipping into overrides. We are working on 3rd party component support, but its not quite there yet.

    I've created a ticket for us to create an example of grid and filter feature being used within Architect.

    By adding a JS Resource I mean go to the top right of the inspector, click + then go to JS Resource and then configure the url appropriately.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      0  

    Default


    Hi aconrad,

    I understand, but filtering is a feature that should be built-in. And there is lot of important components that anyone should be able to integrate in Sencha Architect as something "usual".

    I appreciate the ticket and your support, according to your previous reply seems it should be really easy stuff. For me, a zip in this thread will work, or a brief explanation, code.

    The only thing I don't understand is why do I need to add the JS Resource (never used the overrides from Sencha Architect, sorry). What I expect is just:
    1. In Application edit the requires property.
    2. Put the ux code in the folder so the application can get the code for the ux in the requires property.
    3. Create override (panel grid).
    4. Put additional code in the override.
    5. Works with the grid.
    But I see that I have to do something else.

    Thanks again.

    Quote Originally Posted by aconran View Post
    If you are only using standard Ext JS/Sencha Touch components (no overrides), you will be able to create everything without dipping into overrides. We are working on 3rd party component support, but its not quite there yet.

    I've created a ticket for us to create an example of grid and filter feature being used within Architect.

    By adding a JS Resource I mean go to the top right of the inspector, click + then go to JS Resource and then configure the url appropriately.

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,247
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by iplanit View Post
    The only thing I don't understand is why do I need to add the JS Resource (never used the overrides from Sencha Architect, sorry). What I expect is just:
    1. In Application edit the requires property.
    2. Put the ux code in the folder so the application can get the code for the ux in the requires property.
    3. Create override (panel grid).
    4. Put additional code in the override.
    5. Works with the grid.
    But I see that I have to do something else.
    If you do the above, this will work fine. Using the requires property is simply an alternative to directly including a JS Resource.

    When you include a JS Resource it will generate an additional script tag linking the file.

    When you use requires, it will dynamically load the resource. Note you will probably have to additional configure the loader to tell it where Ext.ux should be loaded from.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      1  

    Default


    Hi,

    What I did to make it work was editing the code generated instead of the override. But it is not the correct way (even if it is working), and I had problems trying to put the code in the override (probably a javascript error).

    Regarding the JS Resource, I did nothing, just copy the ux folder. With the requires the javascript loads.

    I look forward to have the example or some javascript code of the override in the right way.

    Thank you.

    Quote Originally Posted by aconran View Post
    If you do the above, this will work fine. Using the requires property is simply an alternative to directly including a JS Resource.

    When you include a JS Resource it will generate an additional script tag linking the file.

    When you use requires, it will dynamically load the resource. Note you will probably have to additional configure the loader to tell it where Ext.ux should be loaded from.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    d.velev is on a distinguished road

      0  

    Default Quick tutorial

    Quick tutorial


    Hi iplanit,

    Can you hook us up with some quick tutorial or live example for sencha architect 2


  9. #9
    Sencha User
    Join Date
    Aug 2012
    Location
    Dublin
    Posts
    72
    Vote Rating
    11
    iplanit will become famous soon enough

      4  

    Default Example

    Example


    Hi,

    It is not perfect, but I created an example of an override to enable filters in a grid.

    TUTORIAL: Google file illustrating how to use the grid filter feature in Sencha Architect.

    Regards

  10. #10
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,247
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Thanks for putting together this presentation.
    Aaron Conran
    @aconran
    Sencha Architect Development Team