PDA

View Full Version : NEWBIE::how to store data into a label



ilker
25 Sep 2008, 3:59 AM
i want to fill my Ext.form.Label with data from my database and it is returned as a jsonobject.
but because of having no store method of this component i can't write any proxy config option to invoke my action class...i tried to write a jsonReader object but when i looked at api of jsonReader i also could not see any proxy config option for jsonReader...
what Do u suggest me to fill data into a label...
BTW; i wanna display addresses of places like NewYork/The U.S. Post Code : .......
if there is much better component for this purpose ,wanna here from you :)
THX FOR YOUR REPLIES

Condor
25 Sep 2008, 4:08 AM
Try using the StaticTextField user extension instead of Label, then you can simply load your form (StaticTextField behaves just like a normal Field).

ilker
25 Sep 2008, 4:22 AM
User Extension ? :-? himmm.. where can i download it ? where is that js lib.?

ilker
25 Sep 2008, 5:11 AM
m8 i have read this thread but i dont understand how to insert my jsonobject into this static text field :S
Thread (also u have some replies...) :
http://extjs.com/forum/showthread.php?t=20992
i have read all the class functions but there is no clue to use json...

ilker
25 Sep 2008, 5:25 AM
himm may be i have to use store.getAt().... for this...
Yeah i will try this...Thx Condor...

Condor
25 Sep 2008, 6:04 AM
Try something like:

formPanel.getForm.loadRecord(store.getAt(rowIndex));

ilker
25 Sep 2008, 6:18 AM
Ext.namespace("TextAlanlari");

TextAlanlari.AdresVeriAlani = Ext.extend(Ext.form.Label,{
initComponent : function() {
Ext.apply(this,{
autoHeight : true,
autoWidth : true,
html : ????????????????????????????????????????????????????
});
TextAlanlari.AdresVeriAlani.superclass.initComponent.apply(this,arguments);
},
/**
* private
*/
adresBilgisiniDuzenle : function() {
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetAdresBilgisiAction.do'
}),
reader : new Ext.data.JsonReader({
root : 'adresBilgisi',
fields : [
'caddeSokak',
'mahalleSemt',
'disKapiNo',
'icKapiNo',
'ilce',
'il',
'ulke',
'postaKodu'
],
listeners : {
'loadexception' : function(t,o,r,e) {
/**
* bu mesajlar firebug tarzi
* browser debug programlarinda consolelarina
* bilgi yazmak icin kullanilan fonksiyonlar...
*/
console.log(r.responseText);
console.log(e.message);
}
}
}),//end of reader...
autoLoad : true
});//end of store...
/**
* Bu verilere alan alan ulasabilmek icin bir record
* nesnesine at...
*/
var adresRecord = store.getAt(0);
var geriyeDonecekOlanAdresBilgisi = '<b><span style="font-family : Courier">';
/**
* Eksik olan Bilgileri ekranda gosterme olanlari goster sadece...
*/
if(adresRecord.get('mahalleSemt')!=null) {
geriyeDonecekOlanAdresBilgisi +=adresRecord.get('mahalleSemt')+' ';
}
if(adresRecord.get('caddeSokak')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('caddeSokak')+'<br>';
}
if(adresRecord.get('disKapiNo')!=null && adresRecord.get('icKapiNo')) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('disKapiNo')+'/'+
adresRecord.get('icKapiNo')+'<br>';
}
/**
* il ve ilce bilgisini ortala
*/
geriyeDonecekOlanAdresBilgisi+='<center>';
if(adresRecord.get('ilce')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ilce');
}
if(adresRecord.get('ilce')!=null && adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+='/';
}
if(adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('il');
}
geriyeDonecekOlanAdresBilgisi+='<br>';
if(adresRecord.get('ulke')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ulke');
}
geriyeDonecekOlanAdresBilgisi+='</center><br>';
if(adresRecord.get('postaKodu')!=null) {
geriyeDonecekOlanAdresBilgisi+='PostaKodu : '+adresRecord.get('postaKodu');
}
geriyeDonecekOlanAdresBilgisi+='</span></b>';

return geriyeDonecekOlanAdresBilgisi;
}//end of function adresBilgisiniDuzenle...
});
Ext.reg("adresVeriAlani",TextAlanlari.AdresVeriAlani);
i try to write it like that .. wanna collect all information on one label...
but there is a problem i can't call my function in initComponent() function :S...
where is my mistake ??????

Condor
25 Sep 2008, 6:22 AM
The store won't be loaded after you call load() (or set autoLoad:true).
You will have to WAIT for the server to send the response.
Move your code that uses store data to a load event listener on the store.

ilker
25 Sep 2008, 8:15 AM
k m8 i will do what u say but i wonder why auto-completion not work when i want to call my own function. is not this the way to create your own class? can't i call my own function in my class scope :S Strange...

Condor
25 Sep 2008, 8:20 AM
I'm opposed to using initComponent to extend components. I recommend:


TextAlanlari.AdresVeriAlani = function(config) {
TextAlanlari.AdresVeriAlani.superclass.constructor.call(this, Ext.apply({
autoHeight : true,
autoWidth : true,
html : ????????????????????????????????????????????????????
}, config));
};
Ext.extend(TextAlanlari.AdresVeriAlani, Ext.form.Label, {
/**
* private
*/
adresBilgisiniDuzenle : function() {
...
}
});

ps. Who calls adresBilgisiniDuzenle() ?

ilker
25 Sep 2008, 8:31 AM
i wanna call it at that row:
html:adresBilgisiniDuzenle()
Is it wrong????

ilker
25 Sep 2008, 10:06 AM
Does anybody know if our function can be called at the scope of its own class??

for instance i have a function in my class which extends any component in ext-js called adresBilgisiniDuzenle() :
can i call it at that point:
Ext.apply(this,{
......
html : adresBilgisiniDuzenle()
.....
});
.....
This is useless.... But i dont understand why ???

ilker
25 Sep 2008, 10:15 AM
Ext.namespace("TextAlanlari");

TextAlanlari.AdresVeriAlani = function(config) {
Ext.apply(this,{
autuHeight : true,
autoWidth : true,
html : adresBilgisiniDuzenle()
});
TextAlanlari.AdresVeriAlani.superclass.constructor.call(this,config);
}
Ext.extend(TextAlanlari.AdresVeriAlani,Ext.form.Label,{
/**
* private
*/
adresBilgisiniDuzenle : function() {
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetAdresBilgisiAction.do'
}),
reader : new Ext.data.JsonReader({
root : 'adresBilgisi',
fields : [
'caddeSokak',
'mahalleSemt',
'disKapiNo',
'icKapiNo',
'ilce',
'il',
'ulke',
'postaKodu'
],
listeners : {
'loadexception' : function(t,o,r,e) {
/**
* bu mesajlar firebug tarzi
* browser debug programlarinda consolelarina
* bilgi yazmak icin kullanilan fonksiyonlar...
*/
console.log(r.responseText);
console.log(e.message);
}
}
}),//end of reader...
autoLoad : true
});//end of store...
/**
* Bu verilere alan alan ulasabilmek icin bir record
* nesnesine at...
*/
var adresRecord = store.getAt(0);
var geriyeDonecekOlanAdresBilgisi = '<b><span style="font-family : Courier">';
/**
* Eksik olan Bilgileri ekranda gosterme olanlari goster sadece...
*/
if(adresRecord.get('mahalleSemt')!=null) {
geriyeDonecekOlanAdresBilgisi +=adresRecord.get('mahalleSemt')+' ';
}
if(adresRecord.get('caddeSokak')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('caddeSokak')+'<br>';
}
if(adresRecord.get('disKapiNo')!=null && adresRecord.get('icKapiNo')) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('disKapiNo')+'/'+
adresRecord.get('icKapiNo')+'<br>';
}
/**
* il ve ilce bilgisini ortala
*/
geriyeDonecekOlanAdresBilgisi+='<center>';
if(adresRecord.get('ilce')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ilce');
}
if(adresRecord.get('ilce')!=null && adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+='/';
}
if(adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('il');
}
geriyeDonecekOlanAdresBilgisi+='<br>';
if(adresRecord.get('ulke')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ulke');
}
geriyeDonecekOlanAdresBilgisi+='</center><br>';
if(adresRecord.get('postaKodu')!=null) {
geriyeDonecekOlanAdresBilgisi+='PostaKodu : '+adresRecord.get('postaKodu');
}
geriyeDonecekOlanAdresBilgisi+='</span></b>';

return geriyeDonecekOlanAdresBilgisi;
}//end of function adresBilgisiniDuzenle...
});
Ext.reg("adresVeriAlani",TextAlanlari.AdresVeriAlani);


firebug says :
html : adresBilgisiniDuzenle() is undefined :S
what is wrong with that ???

Condor
26 Sep 2008, 12:40 AM
You are missing the scope:

html : this.adresBilgisiniDuzenle()

ilker
26 Sep 2008, 5:47 AM
No m8 no i checked on firebug:
no problem at that point function is called but it says that :
store.getAt(0) is undefined :S
how could this be possible :S

ilker
26 Sep 2008, 6:00 AM
Ext.namespace("TextAlanlari");

TextAlanlari.AdresVeriAlani = function(config) {
Ext.apply(this,{
autuHeight : true,
autoWidth : true,
html : this.adresBilgisiniDuzenle()
});
TextAlanlari.AdresVeriAlani.superclass.constructor.call(this,config);
};
Ext.extend(TextAlanlari.AdresVeriAlani,Ext.form.Label,{
/**
* private
*/
adresBilgisiniDuzenle : function() {
/**
* Bu verilere alan alan ulasabilmek icin bir record
* nesnesine at...
*/
/*var adresRecord = Ext.data.Record.create([
{name : 'caddeSokak',mapping : 'caddeSokak'},
{name : 'mahalleSemt',mapping : 'mahalleSemt'},
{name : 'disKapiNo',mapping : 'disKapiNo'},
{name : 'icKapiNo',mapping : 'icKapiNo'},
{name : 'ilce',mapping : 'ilce'},
{name : 'il',mapping : 'il'},
{name : 'ulke',mapping : 'ulke'},
{name : 'postaKodu',mapping : 'postaKodu'}
]);*/
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetAdresBilgisiAction.do'
}),
reader : new Ext.data.JsonReader({
root : 'adresBilgisi',
fields : [
{name : 'kurumOrganizasyonId' , type : 'int'},
'caddeSokak',
'mahalleSemt',
'disKapiNo',
'icKapiNo',
'ilce',
'il',
'ulke',
'postaKodu'
],
listeners : {
'loadexception' : function(t,o,r,e) {
/**
* bu mesajlar firebug tarzi
* browser debug programlarinda consolelarina
* bilgi yazmak icin kullanilan fonksiyonlar...
*/
console.log(r.responseText);
console.log(e.message);
}
}
}),//end of reader...
autoLoad : true
});//end of store...
var geriyeDonecekOlanAdresBilgisi = '<b><span style="font-family : Courier">';
/**
* Eksik olan Bilgileri ekranda gosterme olanlari goster sadece...
*/
if(store.getAt(0).get('mahalleSemt')!=null) {
geriyeDonecekOlanAdresBilgisi +=adresRecord.get('mahalleSemt')+' ';
}
if(adresRecord.get('caddeSokak')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('caddeSokak')+'<br>';
}
if(adresRecord.get('disKapiNo')!=null && adresRecord.get('icKapiNo')) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('disKapiNo')+'/'+
adresRecor.get('icKapiNo')+'<br>';
}
/**
* il ve ilce bilgisini ortala
*/
geriyeDonecekOlanAdresBilgisi+='<center>';
if(adresRecord.get('ilce')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ilce');
}
if(adresRecord.get('ilce')!=null && adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+='/';
}
if(adresRecord.get('il')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('il');
}
geriyeDonecekOlanAdresBilgisi+='<br>';
if(adresRecord.get('ulke')!=null) {
geriyeDonecekOlanAdresBilgisi+=adresRecord.get('ulke');
}
geriyeDonecekOlanAdresBilgisi+='</center><br>';
if(adresRecord.get('postaKodu')!=null) {
geriyeDonecekOlanAdresBilgisi+='PostaKodu : '+adresRecord.get('postaKodu');
}
geriyeDonecekOlanAdresBilgisi+='</span></b>';

return geriyeDonecekOlanAdresBilgisi;
}//end of function adresBilgisiniDuzenle...
});
Ext.reg("adresVeriAlani",TextAlanlari.AdresVeriAlani);

ilker
26 Sep 2008, 6:26 AM
This ***** function getAt not Working :@ hirrrrrrrrrrrrrrr.....
doesnt it return Record?? am i wrong????
alert(store.getAt(0));
at this line it says store.getAt(0) is undefined ??? i dont understand ??? what is undefined???

Condor
26 Sep 2008, 6:41 AM
This will never work!

You forget that server requests are ASYNCHRONOUS.

You'll have to wait for the server to return the data, which also means that your function can never return the response.

Solution:
1. Use html:'' and call this.adresBilgisiniDuzenle() after calling the constructor.
2. In adresBilgisiniDuzenle add a load listener to the store and move all the code after the store to this handler.
3. Instead of returning the text use this.setText(geriyeDonecekOlanAdresBilgisi);

ps. If you change 'var store' to 'this.store' you can update the text by calling this.store.reload();

ilker
4 Oct 2008, 1:14 AM
Ext.namespace("TextAlanlari");

TextAlanlari.AdresVeriAlani = function(config) {
this.geriyeDonecekAdresBilgisi = null;
Ext.apply(this, {
autuHeight : true,
autoWidth : true,
html : ''
});
TextAlanlari.AdresVeriAlani.superclass.constructor.call(this, config);
this.adresBilgisiniDuzenle();
};
Ext.extend(TextAlanlari.AdresVeriAlani, Ext.form.Label, {
/**
* private
*/
adresBilgisiniDuzenle : function() {
/**
* Bu verilere alan alan ulasabilmek icin bir record nesnesine at...
*/
var adresRecordInstance = Ext.data.Record.create([{
name : 'caddeSokak',
mapping : 'caddeSokak'
}, {
name : 'mahalleSemt',
mapping : 'mahalleSemt'
}, {
name : 'disKapiNo',
mapping : 'disKapiNo'
}, {
name : 'icKapiNo',
mapping : 'icKapiNo'
}, {
name : 'ilce',
mapping : 'ilce'
}, {
name : 'il',
mapping : 'il'
}, {
name : 'ulke',
mapping : 'ulke'
}, {
name : 'postaKodu',
mapping : 'postaKodu'
}]);
adresRecord = new adresRecordInstance();
/**
* burda this.store dersek(var store demek yerine) herhangi bir veri
* update inde direk this.store.reload() diyebiliriz...
*/
store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetAdresBilgisiAction.do'
}),
reader : new Ext.data.JsonReader({
root : 'adresBilgisi',
fields : [{
name : 'kurumOrganizasyonId',
type : 'int'
}, 'caddeSokak', 'mahalleSemt', 'disKapiNo',
'icKapiNo', 'ilce', 'il', 'ulke', 'postaKodu'],
listeners : {
'loadexception' : function(t, o, r, e) {
/**
* bu mesajlar firebug tarzi browser debug
* programlarinda consolelarina bilgi yazmak icin
* kullanilan fonksiyonlar...
*/
console.log(r.responseText);
console.log(e.message);
}
}
}),// end of reader...
autoLoad : true,
listeners : {
'load' : {
fn : function() {
adresRecord = store.getAt(0);
this.geriyeDonecekOlanAdresBilgisi = '<b><span style="font-family : Courier">';
/**
* Eksik olan Bilgileri ekranda gosterme olanlari goster
* sadece...
*/
if (adresRecord.get('mahalleSemt') != null) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('mahalleSemt')
+ ' ';
}
if (adresRecord.get('caddeSokak') != null) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('caddeSokak')
+ '<br>';
}
if (adresRecord.get('disKapiNo') != null
&& adresRecord.get('icKapiNo')) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('disKapiNo')
+ '/' + adresRecord.get('icKapiNo') + '<br>';
}
/**
* il ve ilce bilgisini ortala
*/
this.geriyeDonecekOlanAdresBilgisi += '<center>';
if (adresRecord.get('ilce') != null) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('ilce');
}
if (adresRecord.get('ilce') != null
&& adresRecord.get('il') != null) {
this.geriyeDonecekOlanAdresBilgisi += '/';
}
if (adresRecord.get('il') != null) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('il');
}
this.geriyeDonecekOlanAdresBilgisi += '<br>';
if (adresRecord.get('ulke') != null) {
this.geriyeDonecekOlanAdresBilgisi += adresRecord
.get('ulke');
}
this.geriyeDonecekOlanAdresBilgisi += '</center><br>';
if (adresRecord.get('postaKodu') != null) {
this.geriyeDonecekOlanAdresBilgisi += 'PostaKodu : '
+ adresRecord.get('postaKodu');
}
this.geriyeDonecekOlanAdresBilgisi += '</span></b>';
//***************************IMPORTANT************
this.setText(this.geriyeDonecekOlanAdresBilgisi);
}// end of function fn
,scope : this
}
}// end of listener load
});// end of store...
}// end of function adresBilgisiniDuzenle...
});
Ext.reg("adresVeriAlani", TextAlanlari.AdresVeriAlani);


Yeah thank u very much condor !! i did what u had said it works well...but useless for me..because the text i want to be written down contains html tags and this does not work :
this.setText(this.geriyeDonecekOlanAdresBilgisi);
when i try to write that it writes down nothing..:
this.html=this.geriyeDonecekOlanAdresBilgisi;
?????
why is that so?

Condor
4 Oct 2008, 10:07 AM
If you want to use the embedded HTML you should use:

this.setText(this.geriyeDonecekOlanAdresBilgisi, false);

ilker
6 Oct 2008, 8:42 AM
Ext.namespace("TextAlanlari");

TextAlanlari.AdresVeriAlani = function(config) {
Ext.apply(this, {
autuHeight : true,
autoWidth : true,
html : ''
});
//Label sinifinin constructor'ini yeni parametrelerle cagir...
TextAlanlari.AdresVeriAlani.superclass.constructor.call(this, config);
this.adresBilgisiniDuzenle();
};
Ext.extend(TextAlanlari.AdresVeriAlani, Ext.form.Label, {
/**
* private
*/
adresBilgisiniDuzenle : function() {
/**
* Bu verilere alan alan ulasabilmek icin bir record nesnesine at...
*/
var adresRecordInstance = Ext.data.Record.create([{
name : 'caddeSokak',
mapping : 'caddeSokak'
}, {
name : 'mahalleSemt',
mapping : 'mahalleSemt'
}, {
name : 'disKapiNo',
mapping : 'disKapiNo'
}, {
name : 'icKapiNo',
mapping : 'icKapiNo'
}, {
name : 'ilce',
mapping : 'ilce'
}, {
name : 'il',
mapping : 'il'
}, {
name : 'ulke',
mapping : 'ulke'
}, {
name : 'postaKodu',
mapping : 'postaKodu'
}
]);
/**
* yaptigimiz record gercek bir record nesnesi deil
* Ext.data.Record sinifinin fonksiyonlarini kullanmak icin
* ondan bir instance yarat...
*/
adresRecord = new adresRecordInstance();
/**
* burda this.store dersek(var store demek yerine) herhangi bir veri
* update inde direk this.store.reload() diyebiliriz...
*/
store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetAdresBilgisiAction.do'
}),
reader : new Ext.data.JsonReader({
root : 'adresBilgisi',
fields : [{
name : 'kurumOrganizasyonId',
type : 'int'
}, 'caddeSokak', 'mahalleSemt', 'disKapiNo',
'icKapiNo', 'ilce', 'il', 'ulke', 'postaKodu'],
listeners : {
'loadexception' : function(t, o, r, e) {
/**
* bu mesajlar firebug tarzi browser debug
* programlarinda consolelarina bilgi yazmak icin
* kullanilan fonksiyonlar...
*/
console.log(r.responseText);
console.log(e.message);
}
}
}),// end of reader...
autoLoad : true,
listeners : {
'load' : {
fn : function() {
adresRecord = store.getAt(0);
var geriyeDonecekOlanAdresBilgisi = '<b><span style="font-family : Courier">';
/**
* Eksik olan Bilgileri ekranda gosterme olanlari goster
* sadece...
*/
if (adresRecord.get('mahalleSemt') != null) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('mahalleSemt')
+ ' ';
}
if (adresRecord.get('caddeSokak') != null) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('caddeSokak')
+ '<br>';
}
if (adresRecord.get('disKapiNo') != null
&& adresRecord.get('icKapiNo')) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('disKapiNo')
+ '/' + adresRecord.get('icKapiNo') + '<br>';
}
/**
* il ve ilce bilgisini ortala
*/
geriyeDonecekOlanAdresBilgisi += '<center>';
if (adresRecord.get('ilce') != null) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('ilce');
}
if (adresRecord.get('ilce') != null
&& adresRecord.get('il') != null) {
geriyeDonecekOlanAdresBilgisi += '/';
}
if (adresRecord.get('il') != null) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('il');
}
geriyeDonecekOlanAdresBilgisi += '<br>';
if (adresRecord.get('ulke') != null) {
geriyeDonecekOlanAdresBilgisi += adresRecord
.get('ulke');
}
geriyeDonecekOlanAdresBilgisi += '</center><br>';
if (adresRecord.get('postaKodu') != null) {
geriyeDonecekOlanAdresBilgisi += 'PostaKodu : '
+ adresRecord.get('postaKodu');
}
geriyeDonecekOlanAdresBilgisi += '</span></b>';
this.setText(geriyeDonecekOlanAdresBilgisi,false);
}// end of function fn
}
}// end of listener load
});// end of store...
}// end of function adresBilgisiniDuzenle...
});
Ext.reg("adresVeriAlani", TextAlanlari.AdresVeriAlani);

M8 i did not change anything except u had said but this time it writes down nothing :S
not the line that is written in the code segment nor :
this.setText(geriyeDonecekAdresBilgisi); works...
This time nothing appears on the screen :S
is something wrong ?

Condor
6 Oct 2008, 10:25 PM
Use:

listeners: {
load: {
fn: function() {...},
scope: this
}
}
(otherwise the 'this' in this.setText will refer to the store)

ilker
7 Oct 2008, 7:12 AM
yes you are right condor.... the this refers to the store....
And Thx very much for your excellent experience and knowledge :) You help too much really :)