PDA

View Full Version : Question about combobox config in designer



Mango_lier
31 Mar 2010, 7:02 AM
Is it possible to specify the following code config in designer.

var City = new Ext.form.ComboBox({
emptyText: "Please enter City",
fieldLabel: "City",
name: "City",
hiddenName: "City",
valueField: "ID",
displayField: "City",
editable: false,
mode: "local",
triggerAction: "all",
anchor: "95%",
store: new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: "City",
id: "ID"
},
["ID", "City"])
})

});

aconran
31 Mar 2010, 7:21 AM
The following configurations are missing for ComboBox.
valueField, displayField, editable, triggerAction

Thanks for the quick test, we'll get these in the next version and yes this entire thing could be done via the designer.

Mango_lier
31 Mar 2010, 7:32 AM
Thanks. Any possibility to reset the trial period, 1.0.0.5 is the first working revision on my machine.

aconran
31 Mar 2010, 7:55 AM
Yes, take a look at your PM inbox.

mclarry
1 Apr 2010, 7:34 AM
Is possible to resize the combobox using ext designer?

aconran
1 Apr 2010, 11:37 AM
Yes, ComboBox's are width resizable (not height resizable) under the following restrictions.


Not used in an anchor/form layout
not used in a fit layout
Not within an EditorGrid Column

jackygurui
1 Apr 2010, 11:49 AM
Don't forget tpl is missing as well.

Mango_lier
3 Apr 2010, 10:17 AM
Is it possible to specify the following code config in designer.

var City = new Ext.form.ComboBox({
emptyText: "Please enter City",
fieldLabel: "City",
name: "City",
hiddenName: "City",
valueField: "ID",
displayField: "City",
editable: false,
mode: "local",
triggerAction: "all",
anchor: "95%",
store: new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: "City",
id: "ID"
},
["ID", "City"])
})

});


I know few things are not supported in Designer yet but How do I specify the above in xtypes. Specifically the store part of it.

aconran
3 Apr 2010, 11:12 AM
Mango -

After creating a store on the stores tab, you can link the store to the combobox.

The generated code will use the storeId of the store and link it to the ComboBox through that method.

filippo.ferrari
7 Apr 2010, 6:09 AM
One more on comboboxes... does Designer will support 'listeners' and onSelect?

A configuration like this will be managed by designer?



searchChiamanti = new Ext.form.ComboBox({
fieldLabel: 'Chiamante',
id: 'nome_chiamante',
name: 'nome_chiamante',
allowBlank: false,
minLenght: 3,
maxlenght: 50,
store: dsChiamanti,
displayField:'chiamante',
valueField: 'chiamante',
//typeAhead: false,
loadingText: 'Ricerca in corso...',
anchor:'95%',
hideTrigger:true,
triggerAction: 'all',
tpl: resultTplChiamanti,
itemSelector: 'div.combo-result-item',
listeners: {
'focus': function() {
do something...
},
'click': function() {
do something...
},
'blur': function() {
do something...
}
},
onSelect: function(record){
do something more...
}

});



A suggestion how manage what you "don't want to manage" with designer, the ability to add a custom piece of code in the configuration of an element a key->value entry that the designer simply record and print in the exported files.

Something like:

| key | value |
| listeners | 'the js/extjs code I want to assign to the listeners section...' |

This method gives to Designer a little IDE support for basic action based on element.

Very sorry for my english but I want to give you my contribution too.

Regards

filippo.ferrari
7 Apr 2010, 7:25 AM
I've read only now this:



* This file was generated by Ext Designer version 1.0.0.
* http://www.extjs.com/products/designer/
*
* This file will be generated the first time you export.
*
* You should implement event handling and custom methods in this
* class.
*/

ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);
}
});



Could you tell me the way to do this?

In my element ChiamateViewport I've all my sub elements, one is my combobox and I want to "attach" listeners and onLoad actions...

This is the generated script in the .ui.js file:


...
{
xtype: 'combo',
fieldLabel: 'Chiamante',
anchor: '100%',
tabIndex: 1,
allowBlank: false,
loadingText: false,
mode: 'remote',
store: 'store-chiamanti',
emptyText: 'Cerca Chiamante...',
selectOnFocus: true,
id: 'ricerca-chiamante'
}
...

aconran
7 Apr 2010, 9:36 AM
Could you tell me the way to do this?


Because you have specified an id for both your store and combobox you can retrieve them globally.

Within the initComponent method you can get a reference to the store and combo like so:


var ds = Ext.StoreMgr.lookup('store-chiamanti');
var combo = Ext.getCmp('ricerca-chiamante');


It's worthwhile to note that component id's and storeId's are global to your entire application. Because this is within a Viewport component thats probably okay. However, if this was a component that you planned on reusing you would be better off using itemId's or ref configurations.

filippo.ferrari
8 Apr 2010, 11:47 AM
Perfect, I've find also your expalnation on this post: http://www.extjs.com/forum/showthread.php?t=96495

I've a little problem with this method:

My code in ui.js updatedwith ref


...
{
xtype: 'panel',
title: '',
region: 'west',
width: 100,
split: true,
border: true,
collapseMode: 'standard',
closable: false,
frame: false,
cmargins: '3 3 3 3',
margins: '3 0 3 3',
collapsible: true,
itemId: 'item-box-funzioni-principali',
id: 'box-funzioni-principali',
ref: 'boxFunzioniprincipali'
}
...In my element.js file:



ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

boxFunzioniprincipali.collapse(); //This using ref don't works
}

});


Ext.onReady(function() {

var task = new Ext.util.DelayedTask(function(){
var boxfunzioni = Ext.getCmp('box-funzioni-principali');
//boxfunzioni.collapse(); //This works correctly if de-commented
});

task.delay(3000);

});
I'm able to manipulate elements (eg: a panel that with Designer you can't start collapsed) only if I use a little dalayed function,if not in firebug I've the message: "boxFunzioniprincipali is not defined"

Same issue if I try to add listeners to another element:



...
{
xtype: 'combo',
fieldLabel: 'Chiamante',
anchor: '100%',
tabIndex: 1,
allowBlank: false,
loadingText: false,
mode: 'remote',
store: 'store-chiamanti',
emptyText: 'Cerca Chiamante...',
selectOnFocus: true,
itemId: '',
id: 'chiamante',
ref: '../../../../../../../editorRicercachiamante'
}
...


...
ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

//boxFunzioniprincipali.collapse();

editorRicercachiamante.on({
'focus': function() { //...
Ext.getCmp('id_chiamante').reset();
Ext.getCmp('id_cdc').reset();
Ext.getCmp('cdc').reset();
Ext.getCmp('id_sede').reset();
Ext.getCmp('sede').reset();
},
'click': function() { //...
Ext.getCmp('id_chiamante').reset();
Ext.getCmp('id_cdc').reset();
Ext.getCmp('cdc').reset();
Ext.getCmp('id_sede').reset();
Ext.getCmp('sede').reset();
},
'blur': function() {
this.collapse();
},
'select': function() {
alert('ok');
}
});
}

});
...
In fireBug: editorRicercachiamante is not defined... :-/

aconran
8 Apr 2010, 12:28 PM
In my element.js file:

[code]
ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

boxFunzioniprincipali.collapse(); //This using ref don't works
}

});


You are missing a "this." in front of "boxFunzioniprincipali"

filippo.ferrari
8 Apr 2010, 12:34 PM
I miss it but I've tried with and without, now my code is:




ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

this.boxFunzioniprincipali.collapse();
}

});
But still dosen't works .. now Firebug says:

this.el is undefined
chrome://firebug/content/blank.gif if(this.collapsed || this.el.h...ollapse', this, animate) === false){ ext-all-debug.js (riga 24431)

and



boxFunzioniprincipali is not defined
chrome://firebug/content/blank.gifboxFunzioniprincipali.collapse();

filippo.ferrari
8 Apr 2010, 12:53 PM
Update!!!

This works correctly (with "this"):



ChiamateViewport = Ext.extend(ChiamateViewportUi, {
initComponent: function() {
ChiamateViewport.superclass.initComponent.call(this);

//this.boxFunzioniprincipali.collapse();

this.editorRicercachiamante.on({
'focus': function() {
Ext.getCmp('id_chiamante').reset();
Ext.getCmp('id_cdc').reset();
Ext.getCmp('cdc').reset();
Ext.getCmp('id_sede').reset();
Ext.getCmp('sede').reset();
},
'click': function() {
Ext.getCmp('id_chiamante').reset();
Ext.getCmp('id_cdc').reset();
Ext.getCmp('cdc').reset();
Ext.getCmp('id_sede').reset();
Ext.getCmp('sede').reset();
}
});

}

});


Possible to add listeners but not actions like collapse??

aconran
8 Apr 2010, 2:01 PM
Possible to add listeners but not actions like collapse??

Can you explain what you're looking for in more depth?

filippo.ferrari
8 Apr 2010, 2:14 PM
I'm experimenting interaction with an app layout generated from Designer.

Under your indication I want to do that in .js file that Designer not overwrite in the class that extend my component

Tipically in my apps I've to add actions, listeners etc. (Now I can do this)

In order to manipulate elements I've a panel collapsible but I've found missing the "collapsed:true/false" property for panels in Designer, I try to simply collapse a panel, after the design is rendered.

tks for your interest

aeonmedia
27 Apr 2010, 2:28 AM
ref: '../../../../../../../editorRicercachiamante'


how u count depth ?

MainViewport.ui.js


LcmsMainViewportUi = Ext
.extend(
Ext.Viewport,
{
layout : 'border',
initComponent : function() {
this.items = [
{
xtype : 'panel',
id: 'app-menu',
title : 'LCMS - Czarodziej Lekcji (nazwa lekcji) .a4',
region : 'north',
border : false,
split : true,
layout : 'fit',
tbar : {
xtype : 'toolbar',
id: 'toolbar',
items : [
{
xtype : 'buttongroup',
title : 'Strona',
columns : 8,
items : [
{
xtype : 'button',
//autoRef: 'btOpen',
ref: '../../../../../btOpen',

MainViewport.js


LcmsMainViewport = Ext.extend(LcmsMainViewportUi, {
/**
* @var
*/
version : 1,
sites : 1,
lesson : 1,
initComponent : function() {
LcmsMainViewport.superclass.initComponent.call(this);
//Ext.app.REMOTING_API.enableBuffer = 100;
//Ext.Direct.addProvider(Ext.app.REMOTING_API);
Ext.QuickTips.init();
this.btOpen.on('click',this.windowSiteOpen);
},