PDA

View Full Version : extjs4.0.7 Custom Grid Filters - how to implement?



timTaylor
19 Jul 2012, 12:51 AM
I took a look at the example
http://docs.sencha.com/ext-js/4-1/#!/example/grid-filtering/grid-filter-local.html
(http://docs.sencha.com/ext-js/4-1/#!/example/grid-filtering/grid-filter-local.html)
but it doesn't work with my 4.0.7 version. I don't have the dir 'ux'.
Even if I copy the source code from the docs I didn't get it to work.

Does anybody know a working example, please?

sword-it
19 Jul 2012, 1:55 AM
Hi!

i guess, it may helps you...

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid-filtering/grid-filter-local.html

timTaylor
19 Jul 2012, 3:28 AM
Hello,

thanks, but that's the example I've tried allready.

Maybe this information helps to find out whats wrong:
I get an error the a class is missing: "feature.filters", and that's true.
Inside the ext src folder there is no such file.

Only these files are present:
\extjs407\src\grid\feature\AbstractSummary.js
\extjs407\src\grid\feature\Chunking.js
\extjs407\src\grid\feature\Feature.js
\extjs407\src\grid\feature\Grouping.js
\extjs407\src\grid\feature\GroupingSummary.js
\extjs407\src\grid\feature\RowBody.js
\extjs407\src\grid\feature\RowWrap.js
\extjs407\src\grid\feature\Summary.js

msinn
19 Jul 2012, 7:25 AM
Hi, add in your index.html:



<link rel="stylesheet" type="text/css" href="your/path/to/extjs4/examples/ux/grid/css/GridFilters.css"/>
<link rel="stylesheet" type="text/css" href="your/path/to/extjs4/examples/ux/grid/css/RangeMenu.css"/>


and in your app.js:


Ext.Loader.setConfig({
disableCaching: false,
enabled: true,
paths: {
'Ext.ux': 'your/path/to/extjs4/examples/ux'
}
});

Ext.application({
requires: [
'Ext.ux.grid.FiltersFeature'
],
...

timTaylor
19 Jul 2012, 11:30 PM
Thanks, msinn! That explains, why I didn't find the filter feature.
Is there a way to 'include' the
Ext.ux.grid.FiltersFeature without using the loader?
My php-framework currently doesn't support requests from the Ext.loader and my ExtJS app doesn't make any use of the loader.

Also strange: the request, performed by the loader, looks like this:
Request URL:
http://localhost/pathtomyproject/feature/undefined.js

seems that something's still wrong, even if I would extend my php-framework to support the Ext.loader.

timTaylor
19 Jul 2012, 11:53 PM
It's working without the loader now ...

I've put all js-file links into my html-file:


<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/BooleanFilter.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/Filter.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/filter/StringFilter.js"></script>

<script type="text/javascript" src="/js/extjs407/examples/ux/grid/menu/ListMenu.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/menu/RangeMenu.js"></script>

<script type="text/javascript" src="/js/extjs407/examples/ux/grid/FiltersFeature.js"></script>
<script type="text/javascript" src="/js/extjs407/examples/ux/grid/TransformGrid.js"></script>



now I'm able to create a filter obj like this:


var gridfilters = Ext.create('Ext.ux.grid.FiltersFeature',
{
encode :false, // json encode the filter query
local :false, // defaults to false (remote filtering)
filters:[
{
type :'string',
dataIndex:'timestamp'
}
]
});


Many thanks again for pointing me in the right direction. Without it, I never had a chance to get it done!

msinn
20 Jul 2012, 12:07 AM
Hi,
you can additionally put in your index.html:



<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/FiltersFeature.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/menu/ListMenu.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/menu/RangeMenu.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/BooleanFilter.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/DateFilter.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/ListFilter.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/NumericFilter.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/StringFilter.js">
<script type="text/javascript" src="your/path/to/extjs4/examples/ux/grid/filter/Filter.js">


Maybe you have some problems with your paths.
Did you get any example working on your system? Did you get your app working without filters? How does it look your index.html? Maybe you can post your code and a screenshot of your project folders.
I don't think that the problem is between your php framework and the Loader. And try to use ExtJS 4.1.1, since there are a lot of changes in the filter classes and a lot of bugs are fixed.

timTaylor
20 Jul 2012, 2:25 AM
Thanks, msinn!
I found out the same solution for me in between and replied it here, but I got a message from the Forum, that my posting will be observed by an moderator ...
It's not possible for me to switch to 4.1.1 with this project :-(