Getting the grid.view.features property

[murrayh...@gmail.com]

Thanks for all the previous help. This question probably demonstrates the Glu overload I am experiencing in breaking away from MVC to MVVM!

I have a custom grid filter feature that allows dynamic control of the filters on a grid (ie remote filtering). It just extends the standard ExtJS grid filters feature. I have implemented it in my Glu app and all works well. However, to get it working I needed to do a probably-not-very-glu-thing.

To control the filter dynamically I call my custom method applyFilters() like below when a property on my viewModel changes (eg):

onSearchTextChanged: function(newValue, oldValue, obj) {
var fCfg = {
field : 'username',
type : 'string',
strpos: 'start',
data : {
value : newValue
}
};
var grid = App.app.gluViewport.down('[name=vUsers]');
grid.getView().getFeature('cuxgridfilters').applyFilters(fCfg);
};

What that does it to set the filters as if the user had done it manually via the grid column headers and, as per normal, after a short delay the filter query runs, the server request happens and the grid updates. All good.

For now, as you can see, I get the grid view by referring to the viewport (set in my app's launch() method) then using the normal ExtJS query to locate it.

Now, I am guessing this is a kind of Glu heresy but I cant get my head around the Glu way of doing this with bindings.

Thanks again,
Murray

[murrayh...@gmail.com]

I should also say that the path from the reactor above to the viewModel that has the grid view is this.parentVM

[murrayh...@gmail.com]

and the abbreviated version of the view config is:

{
name : 'vUsers',
xtype : 'grid',

features: [{
ftype : 'cuxgridfilters',
id : 'cuxgridfilters',
filters : [
{ type: 'stringpos', dataIndex: 'username' }
,{ type: 'stringpos', dataIndex: 'firstname' }
,{ type: 'stringpos', dataIndex: 'lastname' }
,{ type: 'stringpos', dataIndex: 'useremail' }
]
}],

columns:[
// etc
]

}

[murrayh...@gmail.com]

OK, I made some progress but have one remaining question. As you can see below I added an afterrender listener to the grid bound to a viewmodel command property function. I have 2 of these listeners and the viewmodel command function signatures differ in a way that I don't understand. I re-read the guide but still don't get it.

On my grid view:

listeners : {
itemdblclick : '@{openUserForm}',
afterrender : '@{gridAfterRender}'
},

On the viewModel:

openUserForm : function(User, rowTarget, index, e, eOpts) {
// The first param is the viewmodel that was clicked on. Good.
},

gridAfterRender : function(eOpts) {

// The only parameter passed in is an object of the listeners (the ExtJS eOpts I think?).
// The grid (which WAS the first parameter to the afterrender event)
// was removed in the binding.initialValue() function in this case
// so to get the grid I need to do this!
var grid = eOpts.afterrender.arguments[0];

},

So, all I need to understand now is why the itemdblclick listener gets the grid as the first parameter but the afterrender does not and instead gets the object of "listeners".

And/or, am I still doing this whole thing wrong?

Thanks again for your help,
Murray

[Ryan Smith]

Hey Murray,

So I'm trying to get to the bottom of what it is you are attempting to do here.  From the sound of it, you have something like a textbox that the user can enter text into, and then you filter the data in the store?  I'm having a hard time understanding why the viewmodel would need to know about the view at all?

I know its tempting to connect the two (and there are certainly instances which require it because I've done it before to get things done)... but you always have to remember that the viewmodel is purely "backend" code to the application and it doesn't need to worry about the UI at all.  In a perfect world, they wouldn't know anything about each other.  The real test is when you go to write your unit tests and they don't pass because the viewmodel has a reference to "grid" which isn't even rendered in the specs.

If you are going to stay "pure" what I would recommend is doing it "old school" and having a listener for the searchText fire an event to the grid which would apply your filter purely through the UI.  You would still be able to bind the variable so that you'd have the searchText in the viewmodel, but it would be a pure separation of the UI and viewmodel logic.  Now, if there is some business logic that you have to do, what I've done before is bind a property on the UI to the viewmodel and then setup a listener for change on the ui which would then fire the event for me.  So it would be something like ui -> viewmodel -> viewmodel changes some ui bound property -> ui picks up a change to that property -> ui fires event to other ui components as necessary.

I hope that helps... let me know if I can better explain that... I know its a difficult concept to get around when you're so used to globing things together all the time.  And seeing the power of glujs definitely is tempting to use everywhere.  Just keep those unit tests in mind, and you'll stay sane :).

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/9a031ff9-20f7-43f0-aaac-8462764dba90%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[murrayh...@gmail.com]

Hi Ryan. Thanks again for your very helpful reply!

> So I'm trying to get to the bottom of what it is you are attempting to do here. From the sound of it, you have something like a textbox that the user can enter text into, and then you filter the data in the store? I'm having a hard time understanding why the viewmodel would need to know about the view at all?

Yes. Good question. It doesn't, it is just me not letting go of MVC controller mentality yet! Lol. Your reply helped change my mindset.

> If you are going to stay "pure" what I would recommend is doing it "old school" and having a listener for the searchText fire an event to the grid which would apply your filter purely through the UI.

Yes, I took that route and handled the whole thing in the view interactions, no need for viewmodel to know at all now.

This did raise one further question though... usually in ExtJS I would add my listeners in the initComponent() on the view:

initComponent: function(){

this.callParent(arguments);

// Add listeners or do stuff now that the component is created

}

I notice with GluJS that at the place I would add the listeners, the ExtJS component is not yet created. That's ok, I used an afterrender listener to the same effect in this case. My question is, is there a "hook" event on the view that once can listen for that is fired after Glu has finished doing everything it does? I was imagining a standard Glu way rather than relying on the appropriate Ext events. Just curious.

> Now, if there is some business logic that you have to do, what I've done before is bind a property on the UI to the viewmodel and then setup a listener for change on the ui which would then fire the event for me. So it would be something like ui -> viewmodel -> viewmodel changes some ui bound property -> ui picks up a change to that property -> ui fires event to other ui components as necessary.

For completeness and my learning, I had a look at this and understand everything except "setup a listener for change on the ui". Is there a Glu way of adding that listener? I tried various things but nothing seemed to work.

So, if the viewmodel has a "mydata" property whose value gets changed by some other process, and in my view I do this:

glu.defView('App.glu.UserSearch', {
xtype : 'form',

mydata : '@{mydata}',

items : [
// items config here
],
// etc
});

How do I add the listener to the view mydata property?

>I hope that helps...

Yes, indeed!

Thanks,
Murray

[Ryan Smith]

You know... after I clicked send I thought a code example would have worked better in there for the mydata property... and then I realized I have no idea how I setup a listener for on change through the ui.  I'm sure I have done it in the past, but at this moment I can't even remember where I might look for something like that.  At the time I labeled it "super hack" so it might have been re-written by now :(.  I'll let you know if I can find it, but I wouldn't hold my breath :(.

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/76bce8dc-e0b7-412a-9d1d-6b92d1b6808e%40googlegroups.com.

[murrayh...@gmail.com]

Thanks Ryan. It was exercising my mind too!

Did you have any thoughts about the other question?
>My question is, is there a "hook" event on the view that one can listen for that is fired after Glu has finished doing everything it does? I was imagining a standard Glu way rather than relying on the appropriate Ext events. Just curious.

Thanks,
Murray

[Ryan Smith]

I always use the render listener for that kind of stuff.  That's always a great place where you know things will definitely be there if they are ever going to be :)

-Ryan

--
You received this message because you are subscribed to the Google Groups "GluJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to glujs+un...@googlegroups.com.
To post to this group, send email to gl...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/glujs/ac17f737-196b-4f41-b4be-ffa87c2b7566%40googlegroups.com.