ExtJS - Dynamische Comboboxen
Ajax Comboboxen
HTML
<h2>Ajax Comboboxen</h2> <form action="" method="post"> <label for="sel1">Bundesland</label><input type="text" id="sel1" size="40"/><br /> <label for="sel2">Stadt</label><input type="text" id="sel2" size="40"/><br /> <label for="sel3">Schule</label><input type="text" id="sel3" size="40"/><br /> </form>
Javascript
Ext.onReady(function(){ var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=states'}), reader: new Ext.data.JsonReader({ totalProperty: 'results', root:'items' }, [{name: 'uid'}, {name: 'bundesland'},{name: 'kuerzel'}]) }); var store2 = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=cities&bl='}), reader: new Ext.data.JsonReader({ totalProperty: 'results', root:'items' }, [{name: 'uid'}, {name: 'stadt'}]) }); var store3 = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=schools'}), reader: new Ext.data.JsonReader({ totalProperty: 'results', root:'items' }, [{name: 'uid'}, {name: 'schule'}]) }); var combo = new Ext.form.ComboBox({ store: store, displayField:'bundesland', valueField: 'uid' , typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Wähle ein Bundesland...', selectOnFocus:true }); combo.applyTo('sel1'); var combo2 = new Ext.form.ComboBox({ store: store2, displayField:'stadt', valueField: 'uid' , typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Wähle ein Stadt...', selectOnFocus:true }); combo2.applyTo('sel2'); var combo3 = new Ext.form.ComboBox({ store: store3, displayField:'schule', valueField: 'uid' , typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Wähle eine Schule...', selectOnFocus:true }); combo3.applyTo('sel3'); combo.store.load(); combo.on('select', function() { combo2.reset(); combo3.reset(); store2.proxy= new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=cities&bl=' + combo.getValue()}); store2.load(); }); combo2.on('select', function() { combo3.reset(); store3.proxy= new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=schools&ci=' + combo2.getValue()}); store3.load(); }); });
Kontakt
Mollio
1
Seite 1 von 1
Hi,
ich habe Probleme mit applyTo in ExtJS 4.x - Gibt es dafür eine Lösung?
Das hier hat mich nicht wirklich weiter gebracht:
www.sencha.com/forum/showthread.php
This is wonderful ! Just what i wanted.
Thanks!
Erstmal vielen Dank für diese Lösung, genau so etwas suche ich schon seit Längerem.
Eine Frage noch: ist es möglich mit der Suche erst ab einer bestimmten Länge des String zu starten? Z.B. bei 5000 Datensätzen macht es Sinn erst ab 3 eingegebenen Zeichen mit dem autocomplete-Funktin zu beginnen.
Als Änfanger mit ExtJs wäre es noch super zu wissen, wie bzw. wo man den spezifischen JS-Code in seine Extension einbaut/-fügt und welche php-Angaben/Abfragen noch im Hintergrund gebraucht werden. Vielleicht kannst du ja zusätzlich noch die class.tx_meineExtension_pi1.php posten?
Wie genau Funktioniert die Umlaut ersetzung?
Iam trying to make a simpler example of dependent comboboxes. I used simple arrays and your approcah. yet I cannot get it to work.
Can you please provide your feedback on this?
tx a lot in advance
Hussein
Ext.onReady(function(){
var states1 = [
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CN', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia'] ];
var states2 = [
['AL', 'AA'],
['AK', 'BB'],
['AZ', 'CC'],
['AR', 'DD'],
['CA', 'EE'],
['CO', 'FF'],
['CN', 'GG'],
['DE', 'HH'],
['DC', 'II'] ];
var states3 = [
['AL', 'AAA'],
['AK', 'BBB'],
['AZ', 'CCC'],
['AR', 'DDD'],
['CA', 'EEE'],
['CO', 'FFF'],
['CN', 'GGG'],
['DE', 'HHH'],
['DC', 'III'] ];
var store1 = new Ext.data.SimpleStore({
fields: ['abbr', 'state1', 'nick'],
data : states1 // from states.js
});
var store2 = new Ext.data.SimpleStore({
fields: ['abbr', 'state2', 'nick'],
data : states2 // from states.js
});
var store3 = new Ext.data.SimpleStore({
fields: ['abbr', 'state3', 'nick'],
data : states3 // from states.js
});
var combo = new Ext.form.ComboBox({
store: store1,
displayField:'state1',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'OOOO',
selectOnFocus:true
});
combo.applyToMarkup('local-states1');
var combo2 = new Ext.form.ComboBox({
store: store2,
displayField:'state2',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'ALASKA',
selectOnFocus:true
});
combo2.applyToMarkup('local-states2');
var combo3 = new Ext.form.ComboBox({
store: store3,
displayField:'state3',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Arizona',
selectOnFocus:true
});
combo3.applyToMarkup('local-states3');
combo.store.load();
combo.on('select', function() {
combo2.reset();
combo3.reset();
// store2.proxy= new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=cities&bl=' + combo.getValue()});
store2.load();
});
combo2.on('select', function() {
combo3.reset();
// store3.proxy= new Ext.data.HttpProxy({url: 'index.php?id=1&type=1001&data=schools&ci=' + combo2.getValue()});
store3.load();
});
});
Can you please provide your index.php file?
tx
i didn't use different index.php, it's TYPO3. I declared a pagetype for 1001 and render it with an extension.
Also jedesmal nen neuen HttpProxy setzen zum Neuladen der Daten? kann man den alten HTTP-Proxy nicht irgendwie resetten?