PDA

View Full Version : Is it possible to use UX in Sencha Designer 2.0?



j.vreeken
7 Feb 2012, 1:28 PM
I want to use UX in Designer 2.0. Is it possible to include Ext.ux.grid.FiltersFeature somehow?

aconran
7 Feb 2012, 1:32 PM
You can certainly include them in your final source code and/or use them explicitly by writing code but you cannot configure them in the UI design view at the moment.

We are finalizing the spec to expose the proper APIs and working with component authors to ensure that we can support the various different situations that people have implemented UX's out there.

This will be a feature of Designer 2.x.

j.vreeken
7 Feb 2012, 2:10 PM
That's good news, i would love to see this featured since there are tons of usefull UX :)

I already modified my deployed code and successfully included the filtering option on my grid. In the meantime, is there some nifty way to push in the code in after deploying from Designer, or use an override like in this post (http://www.sencha.com/forum/showthread.php?103560-How-to-replace-placeholder-components)?

aconran
7 Feb 2012, 2:16 PM
I'd suggest doing it in the implementation file of your view.

You could also try an override like that as well.

j.vreeken
7 Feb 2012, 2:22 PM
Thanks, i'll try that.

btw, what a great product! I played with Sencha Touch in Designer 2.0 beta, just awesome. Sencha rocks! =D>

j.vreeken
8 Feb 2012, 2:13 AM
Almost there.

Is there a function that i can call set the features property for my grid, or add a feature to it?
I now have to hand-edit it and it gets overwritten each time i deploy my Designer project.



What i did so far:
I created a index.html from where i include a custom js before including designer.js:

my filters.js file:

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require(['Ext.ux.grid.FiltersFeature']);

in Designer, i select a grid column and add a new property to it called 'filter'.
I set the value to { type: 'boolean' }

so far, so very good.

The only thing left is setting a new feature to my grid. Since i'm using the groupingsummary feature, i see the features property is already in place in the UI class:

Ext.define('MyApp.view.ui.gridHyperFocus', { extend: 'Ext.grid.Panel',

id: 'gridHyperFocus',
width: 684,
autoScroll: true,
title: 'Overzicht',
forceFit: true,
store: 'hyperfocusStore',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
viewConfig: {
},
features: [
{
ftype: 'groupingsummary',
groupHeaderTpl: 'group: {name} - {tonnen}'
}
],
plugins: .....


When i hand-edit the filter property in the ui class to this, the filter works:


features: [
{
ftype: 'filters',
encode: false,
local: false
},
{
ftype: 'groupingsummary',
groupHeaderTpl: 'group: {name} - {tonnen}'
}
],

ssamayoa
8 Feb 2012, 9:08 AM
We are finalizing the spec to expose the proper APIs and working with component authors to ensure that we can support the various different situations that people have implemented UX's out there.
This will be a feature of Designer 2.x.

Very good news!

I have a bunch of components of mine (simple but useful) I would like to use in the Designer. I also use some ux components from ExtJS out of the box and some extended by other guys.

I hope to see this feature soon.

Regards.

j.vreeken
10 Feb 2012, 12:08 PM
bump

abarash
28 Feb 2012, 5:51 PM
Has there been any progress in implementing this in Designer or has anybody gotten the grid filters working?

(also: bump! ;))

ssamayoa
28 Feb 2012, 6:23 PM
Has there been any progress in implementing this in Designer or has anybody gotten the grid filters working?

(also: bump! ;))

+1

aconran
28 Feb 2012, 8:20 PM
3rd party user extensions are a ways out. You can always add custom code to implement these sorts of things.

j.vreeken
29 Feb 2012, 1:06 AM
I did get things started. In my "8 Feb 2012 2:13 AM" post, i wrote that the last step had to be hand-implemented. There is a way around this.

In my specific case, in Designer, i deleted the Grouping Feature from my grid and manually added it this way:

In designer, select the grid and add the features property by typing in "features" in the "Component Config" box and click the "Add" button.

Now paste the following code for the freshly created "features" property:


[
{
ftype: 'filters',
encode: false,
local: false
},
{
ftype: 'grouping',
depthToIndent: 17,
enableGroupingMenu: true,
enableNoGroups: true,
groupByText: 'Op dit veld groeperen',
groupHeaderTpl: 'Groep: {name}',
hideGroupedHeader: false,
showGroupsText: 'Toon in groepen',
startCollapsed: true
}
]

After saving and deploying the project, the grid filters work!

There...is...however...one...big...caveat...

You will get an overload of messages in the designer about missing the filters class.

An error occured
Ext.Loader is not enabled, so dependencies cannot be resolved

dynamically. Missing required class: feature.filters




Source Class: Ext.Loader

Source Method: require


You can click it away, but you can't ignore it.



This has to do with the fact i placed the Ext.Loader and Ext.Require stuff in my custom filters.js file. Designer, of cause, has no notice of that fact.

j.vreeken
29 Feb 2012, 1:19 AM
My goal is to implement grid filtering using the Sencha Designer, without hand-editing anything after deployment of the project. Using the method i described, that is all you will get.

Grid filters are not "working" in Designer (for now?), heck none of the UX's do. But you can implement them so they work after deployment.

That said, i would love to know how to get rid of the "annoying, screen-overlaying, only-closable-by-mouse-click (must admit, nicely drawn, but that's beside the point!)" - error-box!

CaliLuke
29 Feb 2012, 11:10 AM
That said, i would love to know how to get rid of the "annoying, screen-overlaying, only-closable-by-mouse-click (must admit, nicely drawn, but that's beside the point!)" - error-box!

LOL! We'll work on something, we do understand custom UXs are a fundamental part of our ecosystem. Your problem is on the radar, for GA we will try to at least be less annoying about that, I think some of the changes we're working on will take care of that at least partially.

abarash
29 Feb 2012, 11:59 AM
Thanks, Luca (& rest of team!).

I'm confused: while grid filters are in the UX directory, there are official demos showing how to use it and the code is provided with Ext JS. To me, that wouldn't seem like a "custom UX" or a "3rd party user extension" or really a user-extension at all - doesn't that make it part of the product? I guess I'm unclear on why there's a divide between parts in one directory that ship with the product and are included in demos/etc and parts in another directory that ship with the product and are included in demos but then not officially supported by other parts of the company (Designer). Can you help me understand what's going on here?

j.vreeken
29 Feb 2012, 1:20 PM
Many thanx in advance Luca and team! I realy like the new Designer, it has so much potential, thanx for that!

frb
18 Apr 2012, 9:13 AM
this feature request not implemented in 2.0?
how to use IconCombo extension(http://www.sencha.com/forum/showthread.php?131184-IconCombo) with Architect?

aconran
18 Apr 2012, 10:50 AM
You can include the necessary resources for icon combo via a resource and then use the icon combo via an override.

frb
18 Apr 2012, 11:30 AM
can you provide complete example or howto?

klaus@seitenzeiger.de
11 Aug 2012, 9:39 PM
Hello Forum, hallo ExtJs Team,

(my first post here..:-)

Yes, it would be really nice to have some examples. For people who are new in EJ.4.X and A.2. it is difficult to figure everything out. We look the dokus, the examples and have sometimes no idea how to bring everything together with our targets.

OK, we have to use "overrides". We read the dokus, the examples and some books, but at the end we know the same like at the start ... It is not visible which class and function (and how) we have to override if we want to reach some simple things like gridfilter or google maps (Gmap), (.. or other).

The examples I found are all very cryptic....

Let's say I have made in Architect 2:
A model (Ext.data.Model)
A store (Ext.data.JsonStore) with a proxy (Ext.data.proxy.Ajax) with a reader (Ext.data.reader.Json) (remote)
A gridPanel (Ext.grid.Panel) with some Columns (Ext.grid.column.Column).
Wich of this things I have to promote to a class and to override, and what I have to write in the override-function to get a simple filter, showed it so lot of examples, like here:

Custom Grid Filters Example (http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html)

Thx for audience.

:-)