PDA

View Full Version : Combobox element update



stapeDev
1 May 2014, 5:44 AM
Hi all, i have a problem with the elements in a combo box with a php page.

The php page code


echo "['aaa','aaaa']";


The extjs code for combo box


xtype : 'combo', fieldLabel:"Destinazione d'Uso",
allowBlank:false,
name: 'destinazioneUso',
id : 'destinazioneUso',
emptyText : "Seleziona Destinazione d'Uso",
width:300,
editable :true,
store: [obj],


the extjs code for the request


var query={
autoLoad:false,
url: 'page.php',
success: function(response, opts) {
obj= response.responseText;
},
failure: function(response, opts) {
alert('server-side failure with status code ' + response.status);
}
}
Ext.Ajax.request(query);



i need to return response.responseText as string and write this string in store (combobox)

thank a lot for the help

regards

jsakalos
1 May 2014, 6:49 AM
Why would you do it like this? Configure ajax proxy for combo model and return json from the server. No manual request is necessary in this case.

stapeDev
1 May 2014, 6:52 AM
i want call a php page and the response of this page must be insert in a combobox

jsakalos
1 May 2014, 8:37 AM
If you code also server side of the app (PHP), then it is only matter of what the server returns. By making it to return expected json you can simplify your Ext app a log. Just return:


{"success":true, "records":[{}, {}, {}, ...]}

where records would hold the actual data objects.

stapeDev
1 May 2014, 11:49 AM
So my response from server side is:


$string="{'success':true, 'records':["; foreach($rs as $row){ $string=$string."{ ['".$row['codice']."','".$row['nome']."']},";
} $string=$string."]}"; echo json_encode($string);


and my response is

"{'success':true, 'records':[{ ['1','uffici']},{ ['2','caserma']},{ ['3','scuole']},{ ['4','commerciale']},{ ['5','abitazione']},{ ['6','artigianato']},{ ['7','deposito']},{ ['8','altro']},]}"

now how can i insert this field in a combo box where one is a value field and one is a view field?



xtype : 'combo', fieldLabel:"Destinazione d'Uso",
allowBlank:false,
msgTarget: 'under', // location of the error message
name: 'destinazioneUso',
id : 'destinazioneUso',
emptyText : "Seleziona Destinazione d'Uso",
width:300,
editable :true,
store: ???,



var query={ url: 'phpQuery/destinazioneUso.php',
success: function(response, opts) {
alert(Ext.decode(response.responseText));
},
failure: function(response, opts) {
alert('server-side failure with status code ' + response.status);
}
Ext.Ajax.request(query);

thanks a lot

jsakalos
1 May 2014, 2:26 PM
It seems that you don't have your store configured at all. I believe it would be best to start here: http://docs.sencha.com/extjs/4.2.2/#!/guide/data

skirtle
2 May 2014, 9:13 AM
ComboBox basics:

http://skirtlesden.com/articles/extjs-comboboxes-part-1

Part 2 covers stores, part 3 covers using different fields.

skirtle
2 May 2014, 9:17 AM
... you're also going to have to sort out that response to return something vaguely resembling sane JSON. You've got the whole thing wrapped in a string, randomly inserted braces and a stray comma.

stapeDev
2 May 2014, 12:54 PM
Hi i have followed your guide but not work. I post the code



xtype : 'combo',
fieldLabel:"Destinazione d'Uso",
allowBlank:false,
msgTarget: 'under', // location of the error message
name: 'destinazioneUso',
id : 'destinazioneUso',
emptyText : "Seleziona Destinazione d'Uso",
width:300,
editable :false,
store: {
autoLoad: true,
fields: ['codice','nome'],
proxy: {
type: 'ajax',
url: 'phpQuery/destinazioneUso.php',
}
}


This is my php code for the query on the db



$string="["; foreach($rs as $row){ $string=$string."{'codice':'".$row['codice']."','nome':'".$row['nome']."'}"; }$string=$string."]";echo json_encode($string);

skirtle
2 May 2014, 1:12 PM
I suggest that you post the generated response rather than the PHP you use to generate it.

I don't see a displayField or valueField configured on your combobox. See part 3.

stapeDev
2 May 2014, 1:20 PM
if I insert store:[{...}] i have in the combo box the field "object Object" , but if insert store:{...} crash the app.



xtype : 'combo',
queryMode: 'local',
fieldLabel:"Destinazione d'Uso",
allowBlank:false,
msgTarget: 'under', // location of the error message
name: 'destinazioneUso',
id : 'destinazioneUso',
emptyText : "Seleziona Destinazione d'Uso",
displayField :'nome',
valueField:'codice',
width:300,
editable :false,
store: [{
autoLoad: true,
fields: ['codice','nome'],
proxy: {
type: 'ajax',
url: 'phpQuery/destinazioneUso.php',
}]
}


the response of php page is with json_encode:



"[{'codice':'1','nome':'uffici'}{'codice':'2','nome':'caserma'}{'codice':'3','nome':'scuole'}{'codice':'4','nome':'commerciale'}{'codice':'5','nome':'abitazione'}{'codice':'6','nome':'artigianato'}{'codice':'7','nome':'deposito'}{'codice':'8','nome':'altro'}]"

skirtle
2 May 2014, 1:30 PM
If you wrap the store config in an array it will be treated as raw data rather than as a store config. This is not what you want. Remove those square brackets.

Your server response is total nonsense. You've got double quotes around the response and missing commas in the array. Technically the single quotes should also be double quotes (though that won't prevent it working). It should look something like this:


[
{"codice": "1", "nome": "uffici"},
{"codice": "2", "nome": "caserma"},
{"codice": "3", "nome": "scuole"},
{"codice": "4", "nome": "commerciale"},
{"codice": "5", "nome": "abitazione"},
{"codice": "6", "nome": "artigianato"},
{"codice": "7", "nome": "deposito"},
{"codice": "8", "nome": "altro"}
]

The whitespace is optional, I added that to make it a little easier to read.

Or, if you used an array reader, you could use this format instead:


[
["1", "uffici"],
["2", "caserma"],
["3", "scuole"],
["4", "commerciale"],
["5", "abitazione"],
["6", "artigianato"],
["7", "deposito"],
["8", "altro"]
]

stapeDev
2 May 2014, 2:33 PM
sorry but not work.

this is the answer from php page



[{"codice":"1","nome":"uffici"},{"codice":"2","nome":"caserma"},{"codice":"3","nome":"scuole"},{"codice":"4","nome":"commerciale"},{"codice":"5","nome":"abitazione"},{"codice":"6","nome":"artigianato"},{"codice":"7","nome":"deposito"},{"codice":"8","nome":"altro"},]


xtype : 'combo',
queryMode: 'local',
fieldLabel:"Destinazione d'Uso",
allowBlank:false,
msgTarget: 'under', // location of the error message
name: 'destinazioneUso',
id : 'destinazioneUso',
emptyText : "Seleziona Destinazione d'Uso",
displayField :'nome',
valueField:'codice',
width:300,
editable :false,
store: {
autoLoad: true,
fields: ['codice','nome'],
proxy: {
type: 'ajax',
url: 'phpQuery/destinazioneUso.php',
}
}


i don't know why not work and sorry for the my little experience with extjs

skirtle
2 May 2014, 2:50 PM
You have a stray comma at the end of your JSON array.

stapeDev
2 May 2014, 3:03 PM
i fix it but not work.
it's like an error in the code because the app.js not start with this remote store but works with a local store

store: [['aaa','aaaa']]

skirtle
2 May 2014, 3:10 PM
Do you see any error message in the console?

Which browsers are you seeing the problem in?

stapeDev
2 May 2014, 3:17 PM
i can't see any error because i don't have a console, and i'm testing my application with chrome and safari.
i don't know if this thing is important but my application is a window's object of extjs desktop and when there's an error the window doesn't open. if you want can i show my application with a link.

skirtle
2 May 2014, 3:32 PM
Chrome and Safari have a debugging console built in. Just open the dev tools.

stapeDev
2 May 2014, 11:39 PM
Return console on the start of the page
My file is sample.js




Uncaught TypeError: undefined is not a function ext-all.js:7

relayEventsext-all.js:7
Ext.data.Store.Ext.extend.constructorext-all.js:7
createext-all.js:7
Ext.StoreMgr.Ext.apply.lookupext-all.js:7
Ext.form.ComboBox.Ext.extend.initComponentext-all.js:11
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createext-all.js:7
Ext.Container.Ext.extend.createComponentext-all.js:7
Ext.Container.Ext.extend.lookupComponentext-all.js:7
Ext.Container.Ext.extend.addext-all.js:7
(anonymous function)ext-all.js:7
Ext.apply.eachext-base.js:7
Ext.Container.Ext.extend.addext-all.js:7
Ext.Container.Ext.extend.initComponentext-all.js:7
Ext.Panel.Ext.extend.initComponentext-all.js:7
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createext-all.js:7
Ext.Container.Ext.extend.createComponentext-all.js:7
Ext.Container.Ext.extend.lookupComponentext-all.js:7
Ext.Container.Ext.extend.addext-all.js:7
(anonymous function)ext-all.js:7
Ext.apply.eachext-base.js:7
Ext.Container.Ext.extend.addext-all.js:7
Ext.Container.Ext.extend.initComponentext-all.js:7
Ext.Panel.Ext.extend.initComponentext-all.js:7
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createext-all.js:7
Ext.Container.Ext.extend.createComponentext-all.js:7
Ext.Container.Ext.extend.lookupComponentext-all.js:7
Ext.Container.Ext.extend.addext-all.js:7
(anonymous function)ext-all.js:7
Ext.apply.eachext-base.js:7
Ext.Container.Ext.extend.addext-all.js:7
Ext.Container.Ext.extend.initComponentext-all.js:7
Ext.Panel.Ext.extend.initComponentext-all.js:7
Ext.TabPanel.Ext.extend.initComponentext-all.js:7
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createext-all.js:7
Ext.Container.Ext.extend.createComponentext-all.js:7
Ext.Container.Ext.extend.lookupComponentext-all.js:7
Ext.Container.Ext.extend.addext-all.js:7
Ext.Container.Ext.extend.initComponentext-all.js:7
Ext.Panel.Ext.extend.initComponentext-all.js:7
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createext-all.js:7
Ext.Container.Ext.extend.createComponentext-all.js:7
Ext.Container.Ext.extend.lookupComponentext-all.js:7
Ext.Container.Ext.extend.addext-all.js:7
Ext.Container.Ext.extend.initComponentext-all.js:7
Ext.Panel.Ext.extend.initComponentext-all.js:7
Ext.Window.Ext.extend.initComponentext-all.js:7
Ext.Componentext-all.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
Kext-base.js:7
createWindowDesktop.js:68
MyDesktop.SaveImmobile.Ext.extend.createWindowsample.js:1096
(anonymous function)Desktop.js:223
J



i have another question, when i insert the javascript code in the page html/php (<script ...>....</script>), i replace the store:[['aaa','aaaa']] with store[echo ".....";].
Can i do using only js code?

skirtle
3 May 2014, 2:07 AM
You'll need to use ext-all-dev.js for development to get a meaningful stacktrace. If you set your browser to 'pause on uncaught exceptions' you'll be able to step in when the error happens and inspect the variables to see what's going on.

It looks like some sort of problem with a listener.

What version of ExtJS are you using?

stapeDev
3 May 2014, 9:22 AM
Ext JS 4.0.7