PDA

View Full Version : MD Comboboxes



seek
8 Mar 2010, 1:54 AM
Hi Ext People,
I have two little questions.
With this M/D comboboxes,
1) I have a problem when controls is rendering, both are blank, where I was wrong?
2) keytyping filtering: where to override the query parameters?

Any help will be appreciated.
Seek



var dsStatoDoc, dsTipoDoc;
var tipoDoc, statoDoc;

function tipo_documento(field){
dsTipoDoc = new Ext.data.Store({
id: "dsTipoDoc",
proxy: new Ext.data.HttpProxy({
nocache: true, //callbackParam: "callback",
query: "select * from mytable1",
url: getBaseURL() + "/Get_json_from_sql"
}),
reader: new Ext.data.JsonReader(
{root: "rows", id: "TIPO_DOCUMENTO"},
[{name: "TIPO_DOCUMENTO", type: "string"},
{name: "DESCRIZIONE", type: "string"}
]
)
});

var el = Ext.get(field);
var myid = el.id;
tipoDoc = new Ext.form.ComboBox({
disabled: el.dom.disabled
,width: el.getWidth()+100
,id: myid
,transform: el
,allowBlank: !el.hasClass("mandatory")
,lazyInit: false
,triggerAction: "all"
,forceSelection: true
,emptyText: ""
,store: dsTipoDoc
,displayField: "DESCRIZIONE"
,valueField: "TIPO_DOCUMENTO"
,enableKeyEvents: true
,mode: "remote"
,allQuery: "select * from mytable1"
,lazyRender: false
});
if (el.getValue()) {
tipoDoc.store.load({
params: {
"query": tipoDoc.allQuery
},
callback: function(record, options, success){
if (success) {
if (tipoDoc.store.getAt(0)) {
tipoDoc.setValue(tipoDoc.store.getAt(0).id);
}
else {
tipoDoc.markInvalid("Unable to find data");
}
}
}
});
}
}

function stato_documento(field){
dsStatoDoc = new Ext.data.Store({
id: "dsStatoDoc",
proxy: new Ext.data.HttpProxy({
nocache: true, //callbackParam: "callback",
query: "select * from mytable2",
url: getBaseURL() + "/Get_json_from_sql"
}),
reader: new Ext.data.JsonReader(
{root: "rows", id: "STATO"},
[{name: "TIPO_DOCUMENTO", type: "string"},
{name: "DESCRIZIONE", type: "string"},
{name: "STATO", type: "number"}
]
)
});
var el = Ext.get(field);
var myid = el.id;
statoDoc = new Ext.form.ComboBox({
disabled: el.dom.disabled
,width: el.getWidth()+100
,id: myid
,transform: el
,allowBlank: !el.hasClass("mandatory")
,lazyInit: false
,triggerAction: "all"
,forceSelection: true
,emptyText: ""
,store: dsStatoDoc
,displayField: "DESCRIZIONE"
,valueField: "STATO"
,enableKeyEvents: true
,mode: "remote"
,allQuery: "select * from mytable2"
,lazyRender: false
,lastQuery: ""
});
}

Ext.onReady(function(){
tipo_documento("P3_TIPO_DOCUMENTO");
stato_documento("P3_STATO");
tipoDoc.on("select",
function(combo, value) {
var comboStato = Ext.getCmp("P3_STATO");
comboStato.clearValue();
comboStato.store.filter("TIPO_DOCUMENTO", combo.getValue(), false, true);
}
)
})

tobiu
8 Mar 2010, 4:57 AM
hi seek,

you use:



if (el.getValue()) {
tipoDoc.store.load({...


but the combo has no value yet and you should see in firebug, that no request is fired. so you just need to load the store.

some general tips:

1) If you use a store with json, use the Ext.data.JsonStore
2)



tipoDoc.on("select",
function(combo, value) {
var comboStato = Ext.getCmp("P3_STATO");


what do you think the param "combo" is good for?

3)


tipoDoc.on("select",


take a look at the listeners-config to set this directly in the contruction.

4)



var el = Ext.get(field);
var myid = el.id;
tipoDoc = new Ext.form.ComboBox({


why do you create fields, then convert them to ext-elements and afterwards creating combos with the id of the ext-element? one thing you can do is rendering a combo to an existing container but this way makes no sense from my point of view.


kind regards,
tobiu

seek
8 Mar 2010, 5:16 AM
if (el.getValue()) {
tipoDoc.store.load({...
but the combo has no value yet and you should see in firebug, that no request is fired. so you just need to load the store.

Ops, I'm sorry.
In my code I've comment this part of code :(



some general tips:

1) If you use a store with json, use the Ext.data.JsonStore

Done, tnx



2)


tipoDoc.on("select",
function(combo, value) {
var comboStato = Ext.getCmp("P3_STATO");
what do you think the param "combo" is good for?

for filtering the detail combo with:


comboStato.store.filter("TIPO_DOCUMENTO", combo.getValue(), false, true);


3)


tipoDoc.on("select",
take a look at the listeners-config to set this directly in the contruction.

I'm trying to buil a little framework for a general purpose, but I know I can do it. ;)



4)


var el = Ext.get(field);
var myid = el.id;
tipoDoc = new Ext.form.ComboBox({
why do you create fields, then convert them to ext-elements and afterwards creating combos with the id of the ext-element? one thing you can do is rendering a combo to an existing container but this way makes no sense from my point of view.

I try to integrate ExtJs in a non invasive mode in Oracle Application Express, it generate HTML for me, and I go to broke it >:)

Thanks
Seek

tobiu
8 Mar 2010, 5:24 AM
comboStato.store.filter("TIPO_DOCUMENTO", combo.getValue(), false, true);

compare to:



combo.getStore().filter("TIPO_DOCUMENTO", combo.getValue(), false, true);


you have comboStato already.

seek
8 Mar 2010, 5:44 AM
comboStato.store.filter("TIPO_DOCUMENTO", combo.getValue(), false, true);
compare to:

combo.getStore().filter("TIPO_DOCUMENTO", combo.getValue(), false, true);
you have comboStato already.
Porc...
I copied the example as well from http://www.extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2 :((


...
listeners:{select:{fn:function(combo, value) {
var comboCity = Ext.getCmp('combo-city');
comboCity.clearValue();
comboCity.store.filter('cid', combo.getValue());
}}
}
...

Suggestions/overrides for the first rendering?
I lost value when page was loaded and the standard input was ExtJs-ized :-?

tobiu
8 Mar 2010, 5:50 AM
since you fetch the field, you can get the value it has and specify it in the configs of the combo (value or hiddenValue - config).

ah, ok. if you want to get the other combo, then it is ok (didn't look that deep into the code to see the combos are linked).

but definitely use getStore().

sakis tutorial is from October 20, 2007. it was really good for ext 2 at that time, but is a bit outdated now.


kind regards,
tobiu

tobiu
8 Mar 2010, 5:54 AM
did you take a look at:
http://www.extjs.com/deploy/dev/examples/form/combos.html

the last sample is about converting an existing select into a combo.

seek
8 Mar 2010, 6:00 AM
since you fetch the field, you can get the value it has and specify it in the configs of the combo (value or hiddenValue - config).

ah, ok. if you want to get the other combo, then it is ok (didn't look that deep into the code to see the combos are linked).

but definitely use getStore().

sakis tutorial is from October 20, 2007. it was really good for ext 2 at that time, but is a bit outdated now.


Thanks for your help Tobiu.
What about my second point, now to override query parameter when keytyping filter fires?

seek
9 Mar 2010, 2:49 AM
Thanks to search function on the forum, I have modified my code, but now I have problems with detail combo.
The trigger works ONLY if I enter some text first. If the field is blank, or contains a default value from page-load, then clicking the trigger does nothing :(

Any help will be appreciated...



Ext.override(Ext.form.ComboBox, {
setValue: function(v){
var text = v;
if (this.valueField) {
if (this.mode == 'remote' && !Ext.isDefined(this.store.totalLength)) {
this.store.on('load', this.setValue.createDelegate(this, arguments), null, {
single: true
});
if (this.store.lastOptions === null) {
var params;
if (this.valueParam) {
params = {};
params[this.valueParam] = v;
}
else {
var q = this.allQuery;
this.lastQuery = q;
this.store.setBaseParam(this.queryParam, q);
params = this.getParams(q);
}
this.store.load({
params: params
});
}
return;
}
var r = this.findRecord(this.valueField, v);
if (r) {
text = r.data[this.displayField];
}
else
if (this.valueNotFoundText !== undefined) {
text = this.valueNotFoundText;
}
}
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
}
});
var dsStatoDoc, dsTipoDoc;
var tipoDoc, statoDoc;

function tipo_documento(field){
dsTipoDoc = new Ext.data.JsonStore({
storeId: "dsTipoDoc",
url: getBaseURL() + "/Get_json_from_sql",
nocache: false,
query: "select * from table1",
root: "rows",
id: "TIPO_DOCUMENTO",
fields: [{name: "TIPO_DOCUMENTO", type: "string"},
{name: "DESCRIZIONE", type: "string"}
]
});
var el = Ext.get(field);
var myid = el.id;
tipoDoc = new Ext.form.ComboBox({
disabled: el.dom.disabled
,width: el.getWidth()+100
,id: myid
,transform: el
,allowBlank: !el.hasClass("mandatory")
,triggerAction: "all"
,forceSelection: true
,emptyText: ""
,store: dsTipoDoc
,displayField: "DESCRIZIONE"
,valueField: "TIPO_DOCUMENTO"
,enableKeyEvents: true
,mode: "remote"
,allQuery: "select * from ledsws.iwsttipi_documento"
,lazyRender: false
,lazyInit: false
,value:el.getValue()
});
}

function stato_documento(field){
dsStatoDoc = new Ext.data.JsonStore({
storeId: "dsStatoDoc",
url: getBaseURL() + "/Get_json_from_sql",
nocache: false,
query: "select * from table2",
root: "rows",
id: "STATO",
fields: [{name: "STATO", type: "number"},
{name: "TIPO_DOCUMENTO", type: "string"},
{name: "DESCRIZIONE", type: "string"}
]
});
var el = Ext.get(field);
var myid = el.id;
statoDoc = new Ext.form.ComboBox({
disabled: el.dom.disabled
,width: el.getWidth()+100
,id: myid
,transform: el
,allowBlank: !el.hasClass("mandatory")
,triggerAction: "all"
,forceSelection: true
,emptyText: ""
,store: dsStatoDoc
,displayField: "DESCRIZIONE"
,valueField: "STATO"
,enableKeyEvents: true
,mode: "remote"
,allQuery: "select * from table2"
,lazyRender: false
,lazyInit: false
,lastQuery: ""
,value:el.getValue()
});
}

Ext.onReady(function(){
tipo_documento("P3_TIPO_DOCUMENTO");
stato_documento("P3_STATO");
tipoDoc.on("select",
function(combo, value) {
var comboStato = Ext.getCmp("P3_STATO");
comboStato.clearValue();
comboStato.getStore().filter("TIPO_DOCUMENTO", combo.getValue(), false, true);
}
);
})