PDA

View Full Version : Trigger field - triggerclick is not exposed by API so controllers cant catch it



ssamayoa
10 Feb 2012, 8:37 AM
Hi.

I finally have some spare time so I can play a little with Designer.

I'm trying to replicate some of my hand-crafted views with Designer but first problem is that I cant use ux's SearchField which I use a lot. I could use trigger field instead (SearchField is based on it after all) but "triggerclick" event isnt exposed (well, doesn't exists at all). So trigger field is, for now, useless.

So, how I should solve this?

BTW, "triggerclick" or "triggerNclick" (trigger1click, trigger2click, etc.) should be exposed in trigger field so we can use such field in MVC applications out of the box.

When we will have custom components support in Designer?

Else, ability to override methods of promoted components to classes? For now we can add event code to the components so I guess the support for overriding / adding new methods is almost there. Something like the ability to add new custom properties. With this feature we could at least extend existing components which is, I guess, what almost everybody needs.

Regards.

ssamayoa
10 Feb 2012, 9:01 AM
It seems that basic funtion can only be added to top level containers.

How difficult could be to allow basic functions on components promoted to classes?

An special build with this?

Lets concern about usability later (ex: "override method wizard" or check correct override structure, etc.)

Please, make my weekend a Designer's weekend! :((

Regards.

ssamayoa
15 Feb 2012, 9:19 AM
bump.

No body else using trigger fields?

martins108
16 Feb 2012, 12:58 PM
Did you found answer how to use trigger field in mvc controller?

ssamayoa
16 Feb 2012, 1:34 PM
Using triggerfield in controller is easy.

Create your own trigger which exposes triggerclickevent, this is mine:



Ext.define("pp.lib.component.TriggerFieldClick", {
extend : "Ext.form.field.Trigger",
alias : "widget.triggerfieldclick",


enableKeyEvents : true,


listeners : {
keyup : function(f, e) {
if (f.hideTrigger) {
return;
}
var key = e.getKey();
if (key == e.ENTER || (key == e.SPACE && !f.editable)) {
f.fireEvent("triggerclick", f, e);
}
}
},


afterRender : function() {
var me = this, body = me.bodyEl;
me.callParent();
me.mon(body, "dblclick", me.onDblClick, me);
},


onTriggerClick : function(e) {
var me = this;
if (!me.hideTrigger) {
me.fireEvent("triggerclick", me, e);
}
},


onDblClick : function(e) {
var me = this;
if (!me.hideTrigger) {
me.fireEvent("triggerclick", me, e);
}
}
});


Just use in your views and controllers. For example:



init : function() {
this.control(
"empeditar [name=grupoNombre]" : {
triggerclick : this.buscarGrupo
},
...



Problem is that you cant do this with Designer.

Regards.

aconran
16 Feb 2012, 3:05 PM
Problem is that you cant do this with Designer.


The approach you outlined above would work fine in designer. THere is one enhancement that we need to make that will allow you to complete that workflow. That is the ability to type in your own custom event names and not require that the user pick something that is from the targetType.

ssamayoa
18 Feb 2012, 9:20 AM
The approach you outlined above would work fine in designer. THere is one enhancement that we need to make that will allow you to complete that workflow. That is the ability to type in your own custom event names and not require that the user pick something that is from the targetType.

And the ability of override/edit initComponent() and other methos and we can define custom components in Designer...

ssamayoa
24 Feb 2012, 12:28 PM
Bump:

- User events
- Inherited methods override including initComponent() .

aconran
24 Feb 2012, 1:17 PM
We're aware of the need and working on a solution.

ssamayoa
24 Feb 2012, 2:34 PM
We're aware of the need and working on a solution.

I'm aware of that.

I just played with SD and didn't started anything for real because that.

That functionallity is a must because I need my own components which aren't to sophisticated but really usefull. For example, ExtJS haves a DisplayField but there is no way to format shown data so I extended it to show booleans, numeric and date data with formatting. I also use a lot
TriggerFieldClick I posted before.

I guess other advanced users are hitting this limitations (may be I'm wrong).

Regards.

aconran
28 Feb 2012, 11:37 PM
In regard to overriding the implementation and adding these things as you wish...
http://www.sencha.com/forum/showthread.php?184095-Breaking-changes-regarding-Code-Editing-Build-298

ssamayoa
8 Mar 2012, 3:02 PM
BUMP:

Allow to enter text in controller action name for user defined events (triggerclick for example):

32530

Event function can be generated with no arguments, developer must use arguments array to get them, for example:



onTriggerClick: function() {
var field = arguments [0];
...
}


Of course would be nice if Designer can detect non-standard or "unregistered" event and allow the addition of parameters but at first this way could be easy to implement.

For now I have no idea on how capture events from use trigger field or derivates.

Regards.

aconran
8 Mar 2012, 4:03 PM
It's on our radar.

ssamayoa
15 Mar 2012, 8:00 AM
BUMP: I need trigger field...




Allow to enter text in controller action name for user defined events (triggerclick for example):

32530

Event function can be generated with no arguments, developer must use arguments array to get them, for example:



onTriggerClick: function() {
var field = arguments [0];
...
}


Of course would be nice if Designer can detect non-standard or "unregistered" event and allow the addition of parameters but at first this way could be easy to implement.

For now I have no idea on how capture events from use trigger field or derivates.

Regards.

datosula
20 Mar 2012, 8:09 AM
Hi All,

I needed to have additional "clear" trigger to combobox and found solution. I exported standard combobox to file. This option is available if combobox, or any other component is toplevel i.e. is located in Views section. You just need to right click and select export to file. The exported file is xds file which is recognized by SD. I made some modifications in the file externally and added some custom code. Afterwards I used import from file which is available by right click on any component in components toolbar. After that you can use this new Custom Component just as an ordinary one, i.e. you may dragndrop, assign values and etc. Here is content of CliearableCombo.xds file:


{
"xdsVersion": "2.0.0",
"frameworkVersion": "ext40",
"internals": {
"type": "combobox",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"designer|userClassName": "ClearableCombo",
"designer|userAlias": "clearablecombo",
"trigger2Cls": "x-form-clear-trigger",
"onTrigger2Click":function()
{
var me=this;
me.clearValue();
},
},
"customConfigs": [
{
"group": "(Custom Properties)",
"name": "trigger2Cls",
"type": "object"
},
{
"group": "(Custom Properties)",
"name": "onTrigger2Click",
"type": "function"
}
],
"expanded": true
},
"linkedNodes": {},
"boundStores": {},
"id": "ucmpClearableCombo",
"name": "ClearableCombo",
"category": {
"id": "xdcForm Fields",
"name": "Form Fields"
}
}


The above code is solution for some problems in this thread, but I have a question:

We are using source sharing and system and I want to know there this custom component is stored, i.e. what files should be shared to make tshi custom component available to other developers. I was unable to find where it is stored.

Thanks ahead.
David.

ssamayoa
20 Mar 2012, 8:20 AM
We are using source sharing...


Put your modified xsd files under version control so each developer can check-out them and import in their own SD installation.

BTW, what I need is the ability to declare controller action for "triggerclick" or any user defined event.

Regards.

aconran
20 Mar 2012, 8:37 AM
We are using source sharing and system and I want to know there this custom component is stored, i.e. what files should be shared to make tshi custom component available to other developers. I was unable to find where it is stored.

Thanks for sharing your solution with the community. Custom components which have been imported into your designer are stored in the app data's localstorage file.

datosula
21 Mar 2012, 2:59 AM
Hi and Thanks for reply,

The solution does not work well cause after save the data in initComponent function is not saved by SD. So I found workaround and exported xds file should look like this:



{
"xdsVersion": "2.0.0",
"frameworkVersion": "ext40",
"internals": {
"type": "combobox",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fieldLabel": "Field Label",
"designer|userClassName": "ClearableCombo",
"designer|userAlias": "clearablecombo",
"trigger2Cls": "x-form-clear-trigger"
},
"customConfigs": [
{
"group": "(Custom Properties)",
"name": "trigger2Cls",
"type": "string"
},
{
"group": "(Custom Properties)",
"name": "onTrigger2Click",
"type": "function"
}
],
"expanded": true,
"cn": [
{
"type": "fixedfunction",
"reference": {
"name": "items",
"type": "array"
},
"codeClass": null,
"userConfig": {
"fn": "onTrigger2Click",
"implHandler": "var me = this;\nme.clearValue();",
"designer|userClassName": "onTrigger2Click"
},
"customConfigs": [],
"expanded": true
}
]
},
"linkedNodes": {},
"boundStores": {},
"id": "ucmpClearableCombo",
"name": "ClearableCombo",
"category": {
"id": "xdcForm Fields",
"name": "Form Fields"
}
}

ssamayoa
21 Mar 2012, 6:54 AM
Overrides aren't stored in XSD nor local storage, just in the app/view/override so you should copy that/those files also and put in version control.

Regards.