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

      0  

    Default PERFECT WORK !

    PERFECT WORK !


    I have done this in 5 minutes. It should be by default.

    Best Regards to iplanit and his Example.

    Nice work.

  2. #12
    Sencha Premium Member Nxs's Avatar
    Join Date
    Mar 2012
    Posts
    43
    Vote Rating
    2
    Nxs is on a distinguished road

      0  

    Default


    Quote Originally Posted by iplanit View Post
    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
    Good Job !

  3. #13
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    260
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default


    It's not necessary to create an override to implement the filtering feature on a grid. Many of the steps outlined in the guide prepared by iplanit are valid. For example, copying the files from the Examples/ux folder, adding the CSS, etc.

    However creating an override is more difficult, involves more steps and is less maintainable than doing things in SA. Also, when not using an override, there's no need to create a separate class (there's no harm, but also no need).

    So, what do I mean?

    Since SA was in beta (then called Designer) it has been possible to add a configuration property of any name referencing any type to any class. You do this by using the properties filter. Select a class, then in the place when you'd normally type some text you want to use as a property filter type following text including the colon:

    Code:
    mynewproperty: true
    then press the 'Add' button. You will see a new property called 'mynewproperty' and a checked check box alongside. So creating a property is easy.

    Grid filtering is a feature and the property needed to invoke a feature, which is called 'features', is equally easy to create but this time the property is an array. So start out creating the property:

    Code:
    features: []
    and press the 'add' button. Now you have a new property with the green blob button as its value. Click on the blob to enter more information. To start with you will have the just the open and close square brackets you entered. Put them on separate lines and between them define the features you need. When you've finished it should look something like this:

    Code:
    [
        {
            ftype: 'filters', 
            encode: false,
            local: true
        },
        {
            ftype: 'summary'
        },
        {
            ftype: 'groupingsummary'
        }  
    ]
    Here I've created features for grouping and summary as well as filtering but you don't have to. However, if you want to use other features they must appear here. That is, you can't use this technique and use the 'Grid features' option provided by SA at the same time. This is because any ad-hoc properties you create go at the beginning of the configuration. The 'features' property created by SA goes right at the end and, so, wins every time. Even so, you are able to use the built-in feature to create the syntax you need to paste into your own 'features' property and then delete the feature created by SA.

    The last step is to enable filtering for each column. Columns can be filtered if they expose a 'filterable' property which is set to true. Select a column you want to be able to filter and enter this into the property filter box (just like above):

    Code:
    filterable: true
    and then press the add button. If you have assigned a type to your column in the underlying model or store and have only simple filtering needs, that's it. If you need to provide more filter information then you are able to create a 'filters' property on each column. This is an object property. This example is taken from the Sencha examples. First create a property by entering the text:

    Code:
    filter: {}
    then press the 'add' button. The edit the property to add:

    Code:
    {
        type: 'list',
        store: optionsStore
    }
    For more information about the filter options see the ExtJS documentation.

  4. #14
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    185
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Grid filtering is a feature and the property needed to invoke a feature, which is called 'features', is equally easy to create but this time the property is an array. So start out creating the property:
    This works but design view shows nothing.

    SA 2.1 / Build 6.78
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #15
    Sencha User
    Join Date
    Feb 2013
    Posts
    1
    Vote Rating
    0
    prm is on a distinguished road

      0  

    Default


    Thanks for the solution. Filter feature worked fine.

    But now i don't see the design view in the Architect.

  6. #16
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    185
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      1  

    Default


    Quote Originally Posted by prm View Post
    But now i don't see the design view in the Architect.
    That's what I said (http://www.sencha.com/forum/showthre...l=1#post937043).

    Try mine:

    http://www.sencha.com/forum/showthre...-a-la-2.1-quot

    (note: uses override).

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!