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();
    });
});
9 Kommentare
#9 Andy schrieb am 16.12.2011 15:17

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 Sad

#8 Manish schrieb am 06.01.2011 23:01

This is wonderful ! Just what i wanted.

 

Thanks!

#7 Alex schrieb am 16.11.2009 09:19

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.

#6 Nicole schrieb am 05.03.2009 16:24

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?

#5 relate schrieb am 08.09.2008 11:54

Wie genau Funktioniert die Umlaut ersetzung?

#4 Hussein schrieb am 15.08.2008 21:52

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();

});

});

#2 Hussein schrieb am 14.08.2008 22:03

Can you please provide your index.php file?

 

tx

#3 steffen schrieb am 15.08.2008 11:37

i didn't use different index.php, it's TYPO3. I declared a pagetype for 1001 and render it with an extension.

#1 Daniel schrieb am 13.08.2008 08:06

Also jedesmal nen neuen HttpProxy setzen zum Neuladen der Daten? kann man den alten HTTP-Proxy nicht irgendwie resetten?

einen Kommentar schreiben
Typo3