PDA

View Full Version : Ext.gp.Grid



tino7_03
29 Jan 2012, 10:02 PM
I have create a Grid component, it is a superclass of very good mitchelsimoens Ext.ux.touch.grid component.
The main feature is the filter Row Toolbar.
The component is ready for download from https://github.com/faustopracek/

For mitchellsimoens:
I don't know if my class is a problem for you because it use your component. If the answer is "Yes" I can remove it.

mitchellsimoens
30 Jan 2012, 9:02 AM
Not a problem... competition is always good. Forewarning... I should have time this week to fix it >:)

tino7_03
30 Jan 2012, 10:05 AM
Thanks for your words. I cannot win on you!
I don't know if is it help for you but I have tried to fix your component for PR4. I have attached my patch here
http://www.sencha.com/forum/showthread.php?150431-Ext.ux.touch.grid/page4

shaneavery
6 Feb 2012, 8:47 PM
Tino,

Thanks for the updates. I am trying your extension with Beta1, and am running into some issues:



DateExtras.js:1310 (http://localhost/dwila/touch/src/DateExtras.js?_dc=1328589405530)Uncaught TypeError: Cannot read property 'Date' of undefined



Ext.gp.Grid.js:47 (http://localhost/dwila/app/view/Grid.js?_dc=1328589406832)Uncaught TypeError: Object [object Object] has no method 'update'



Ext.gp.Grid.js:229 (http://localhost/dwila/app/view/Grid.js?_dc=1328589406832)Uncaught TypeError: Cannot call method 'setDisabled' of undefined

Just curious if you have run into issues using Ext.gp.Grid with ST2 Beta1. Any ideas?

PS: I am using Mitchell Simoens updated Ext.ux.touch.grid for B1.

shaneavery
8 Feb 2012, 9:28 AM
Tino,

I just had to adjust a couple of lines in your class to get it to work in ST2-B1 using Mitchell Simoens updated Ext.ux.touch.grid for B1.

First, I changed line 47 from this:



elem.update('');


to this:



elem.setHtml('');


I also adjusted your _handleGridPaint function to make the painting of the forward and back buttons a conditional so that the relevant block of code only runs if this.showFilterRowPaging == true. This keeps ST2 from complaining to the console that "backButton" etc. is "undefined". So I changed lines 219-227 in your code from this:



var total = grid.store.getTotalCount(),
currentPage = grid.store.currentPage,
pages = Math.ceil(total / grid.store.getPageSize()),
backButton = Ext.ComponentQuery.query('button[gpGridFilterBackBtn='+this.getId()+']')[0],
forwardButton = Ext.ComponentQuery.query('button[gpGridFilterForwardBtn='+this.getId()+']')[0]
console.log();

backButton.setDisabled(currentPage == 1);
forwardButton.setDisabled(currentPage == pages);


to this:



if (this.showFilterRowPaging==true) {
var total = grid.store.getTotalCount(),
currentPage = grid.store.currentPage,
pages = Math.ceil(total / grid.store.getPageSize()),
backButton = Ext.ComponentQuery.query('button[gpGridFilterBackBtn='+this.getId()+']')[0],
forwardButton = Ext.ComponentQuery.query('button[gpGridFilterForwardBtn='+this.getId()+']')[0]
console.log();

backButton.setDisabled(currentPage == 1);
forwardButton.setDisabled(currentPage == pages);
}


Hope this is useful to you. So far, after making these minor adjustments, Ext.gp.Grid is working as expected using Mitchell Simoens Ext.ux.touch.grid for ST2-B1.

mitchellsimoens
8 Feb 2012, 9:30 AM
if you want to give back, you should fork the GitHub repo and make your changes and submit a pull request so GitHub repo authors can just merge in changes if they think it is good.

shaneavery
8 Feb 2012, 9:44 AM
Thanks for the advice, and thanks again for your grid extension!

tino7_03
8 Feb 2012, 9:49 AM
Thanks for help. I don't know github very well, but tomorrow I will try all and after I will update github.
I'm very happy for the good enviroment in this forum. Here there is always an answer and help for develop good solutions!

shaneavery
8 Feb 2012, 10:15 AM
Tino,

I agree with you about these forums. Very helpful, indeed.

FYI, I sent you a pull request on GitHub, so if you want to merge in these changes, it is ready to go. If you decide to implement different fixes, just ignore the pull request.

Thanks.

tino7_03
8 Feb 2012, 11:30 PM
Github Request accpted.
Thanks very mutch for your help!!!

tino7_03
9 Feb 2012, 4:19 AM
I have changed in GitHub repo the component namespace from Ext.gp.Grid to Ext.ux.gp.Grid for to respect the usually namespaces roules

shaneavery
14 Feb 2012, 9:00 PM
Tino,

Looks like the CSS changes made to B3 are effecting the display of your filter row. The input fields are not painting, nor is the datepicker field. Please advise.

Thanks,

Shane

tino7_03
15 Feb 2012, 12:55 PM
Thanks for your post and again for your help in past also.
Sorry but I have not time until next week to work about this issue. I'm not using beta 3 at the moment but next week I will look all.

tino7_03
15 Feb 2012, 3:03 PM
The night is long and one hour less of sleep is a good investment if it give me the opportunity of solve the B3 issue with my component... :)
The problem was not in CSS i think, because I don't use it.
I have found a bad rendering using hbox layout at line 122. Changing it in other layout the filters are displayed but in not correct way. I have modified my code for using hbox layout, but this time calculating the exact pixel size of each filter field. After I have used the fields resize event for calculate again the size when the screen change.
I have tested all with textfield only and not with datefield, but I think it's ok. If there are problem with date please write to me again.
The library is always on GitHub at: https://github.com/faustopracek/Ext.ux.gp.Grid

(https://github.com/faustopracek/Ext.ux.gp.Grid)Now I can go to sleep...

shaneavery
22 Feb 2012, 8:32 PM
Tino,

Thanks for your last update. It is working fine after I comment out the height property for a datefield.

One thing that disturbs me though, the filter does not function at all with Android 2.3.3 browser since Beta3. It works perfectly with Chrome on PC, but not at all on Android.

With Android, the component paints correctly, the fields accept input, etc. However, it appears _applyFilter:function() is not functioning correctly, as all records are filtered out, no matter what is entered into a filter field. Have you tried this on Android? Any ideas?

tino7_03
23 Feb 2012, 12:05 PM
Actually my android device is broken and I'm waiting for to have it again. I have not idea about the problem. Can you try it on android 3.0?
You can also try to disable component filtering and, using 'filter' event, make a custom filter function...

mike lebowski
24 Feb 2012, 1:55 PM
I am currently using just the straight up grid. However, I am thinking that I might want to add a column filter. Actually, I think I only need one column filter, so I may not put it in the grid itself ... it could be external to the grid.

However, assuming I decide it would be better in the grid, I have a question. This column is likely to be very narrow, and the content of the column is an icon , which will vary based on the value the icon represents (an enumerated value). I want to allow user to filter to show only those rows with 1of the enumerated values. I anticipate a drop down with a list of the icons and their meaning in text. This means the filter will be WIDER than the column itself. Is this possible with your plug in or is the filter width constrained by the column width?

shaneavery
24 Feb 2012, 3:52 PM
I think I have discovered the issue. It appears that Ext.field.Datepicker has been changed since Beta3. Ext.field.Datepicker will populate the value of it's text field with whatever the first value of it's associated Ext.picker.date component is. When _applyFilter is run, a date value is passed in, even if the picker was not used. I can work around this by forcing a value of "null" when the picker is created.

For example, currently line 103 is this, which does not filter correctly:



picker: pickerDate


When I change line 103 to this, it does filter correctly:



picker: {value: null}


Just an FYI. I trust you will figure out the best way to update your code.

PS: I turns out this issue has nothing to do with Android vs. Chrome browsers. I had duplicate properties with different values set on some configs in my testing. It turns out Chrome was simply accepting one property, while Android was accepting the other.

tino7_03
27 Feb 2012, 12:44 PM
This week is very hard for me and it's a problem for me to have time for change the grid code. I'm very happy for yor discovery about datepicker an i will try to work on it in ma week end, but if you watt you can work on the code. Until now you have made a good job with the component.

For mike: I think there are not problem to have a combo with different size of the grid column because my fields are in a toolbar and not in the grid column. I don't know if is it possible to have a combo with the list with large size different of the it's text field...

mike lebowski
27 Feb 2012, 12:53 PM
Tino, is there a screenshot of what your grid looks like, with some filters?

hallikpapa
27 Feb 2012, 6:25 PM
Does your plugin have the ability to do styling on rows?

For example, I would like to be able to color rows (green, yellow, red) based on the value of a certain column. This is easily possible in extjs4 and the grid renderer function. Do you use a renderer function on each column, that receives the row data as well as the column object so it can be styled?

Thanks!

mike lebowski
28 Feb 2012, 12:16 AM
Does your component have the ability to specify a selectfield for the filter ui on a particular column?

mitchellsimoens
28 Feb 2012, 5:46 AM
Does your plugin have the ability to do styling on rows?

For example, I would like to be able to color rows (green, yellow, red) based on the value of a certain column. This is easily possible in extjs4 and the grid renderer function. Do you use a renderer function on each column, that receives the row data as well as the column object so it can be styled?

Thanks!

Ext.ux.touch.grid does (Ext.ux.gp.Grid extends Ext.ux.touch.grid).

https://github.com/mitchellsimoens/Ext.ux.touch.grid

tino7_03
28 Feb 2012, 7:26 AM
Tino, is there a screenshot of what your grid looks like, with some filters?

You can find a little image here:
http://www.sencha.com/forum/showthread.php?173163-Ext.ux.touch.grid.FilterRow-plugin&highlight=plugin

tino7_03
28 Feb 2012, 7:28 AM
Ext.ux.touch.grid does (Ext.ux.gp.Grid extends Ext.ux.touch.grid).

https://github.com/mitchellsimoens/Ext.ux.touch.grid
Yes, my component extend mitchell simoens component. I apply to it filter feature only...

mitchellsimoens
28 Feb 2012, 7:30 AM
Yes, my component extend mitchell simoens component. I apply to it filter feature only...

You may want to change your GitHub description... your component is a subclass of Ext.ux.touch.grid not superclass. Superclass is what you extend, subclass is the class that extends another. For example, Ext.Container is the superclass of Ext.Panel; Ext.Panel is a subclass of Ext.Container.

hallikpapa
28 Feb 2012, 11:40 AM
Ext.ux.touch.grid does (Ext.ux.gp.Grid extends Ext.ux.touch.grid).

https://github.com/mitchellsimoens/Ext.ux.touch.grid

Really? Is there an example in your project? I am using it right now, but there is only one variable passed into the renderer on a column, and that's actual record. How would I style an entire row? I think I asked this question in your thread after I was talking about styling a specific cell.

mitchellsimoens
28 Feb 2012, 11:42 AM
You won't do a whole row but apply styles to each cell.