ComboBox???????????????

[adapco]

????????????????????????

??????????

???ComboBox?????
?????????????????
????????????????????????????????????
?????ComboBox???????

???????????????????????????(x-combo-list)?
????????????????

????????

var et_wrapper = '';
Ext.onReady(function() {
    var st = new Date();
    var et = st.add(Date.HOUR, 2);
    var fm = new Ext.FormPanel({
        id:'fmPanel',
        layout:'table',
        buttonAlign: 'left',
        baseCls:'x-form',
        layoutConfig: {columns:4},
        items:[{
            xtype: 'label',
            text: '??',
            colspan: 1,
            width: 60
        },{
            xtype: 'textfield',
            id: 'stimeField',
            colspan: 1,
            width: 110
        },{
            xtype: 'label',
            text: '??',
            colspan: 1,
            width: 50
        },{
            xtype: 'textfield',
            id: 'etimeField',
            colspan: 1,
            width: 110
        }],
        buttons:[{
            text: 'OK',
            id: 'okBtn'
        },{
            text: 'Cancel',
            id: 'cclBtn'
        }]
    });

    var viewport = new Ext.Viewport({
        items: [fm]
    });

    // ?????????????????
    function calcTime(st, et){
        // ??
    }

    // ??????????????????????????ComboBox?????
    function stimeClick(cm,str,pt){
        var store = cm.getStore();
        var maxr = store.getCount();
        var st = str.get('ft');
        var et = store.getAt(maxr-1).get('ft');

        var tms = calcTime(st, et);
        var etTM = new Ext.data.JsonStore({
            autoDestroy: true,
            autoLoad:true,
            data: tms,
            fields:['cd', 'ft', 'tm']
        });
        // ????????????????????????
        var el;
        own = Ext.get("etimeField").parent();
        if (own.id != et_wrapper && et_wrapper != ''){
            if ((el=Ext.get("etimeField").next())!=null) el.remove();        // ComboBox???
            own.remove();
            Ext.get(et_wrapper).insertHtml("afterBegin",'<input type="text" id="etimeField" class="x-form-text x-form-field "/>');
        }else{
            et_wrapper = own.id;
        }

        var etimeCombo = new Ext.form.ComboBox({
            id: 'etmCombo',
            allowBlank: false,
            hiddenName: 'etCode',
            mode: 'local',
            store: etTM,
            displayField:'tm',
            valueField:'ft',
            forceSelection: true,
            triggerAction: 'all',
            selectOnFocus: true,
            applyTo: 'etimeField'
        });
    }

    var tms = calcTime(st, et);
    var stTM = new Ext.data.JsonStore({
        autoDestroy: true,
        autoLoad:true,
        data: tms,
        fields:['cd', 'ft', 'tm']
    });

    var stimeCombo = new Ext.form.ComboBox({
        id: 'stmCombo',
        allowBlank: false,
        hiddenName: 'stCode',
        mode: 'local',
        store: stTM,
        displayField:'tm',
        valueField:'ft',
        forceSelection: true,
        triggerAction: 'all',
        selectOnFocus: true,
        applyTo: 'stimeField'
    });
    stimeCombo.on('select', function(cm,str,pt){stimeClick(cm,str,pt);});
});

FireBug?HTML???????????????????

<div class="x-layer x-combo-list " id="ext-gen26" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 125px; height: 210px; font-size: 12px;">
<div class="x-layer x-combo-list " id="ext-gen30" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 125px; height: 210px; font-size: 12px;">
<div class="x-layer x-combo-list " id="ext-gen34" style="position: absolute; z-index: 11000; visibility: hidden; left: -10000px; top: -10000px; width: 125px; height: 210px; font-size: 12px;">

ComboBox????????????????????????????????
??????????????????????????????????????

???????????????????
???????????
??????????

[adapco]

?????????????(???)
?????????id?????

Ext.get('ext-gen26').remove();

????????????????????????id????????????????
ComboBox ? listClass ??????????? x-combo-list ?????????(unique_class)?????
Ext.select('div.unique_class').remove(0);
??????????????

?????????
????????????????????????????????

[Tommy1969]

??????? (??????????????…) ????????…?

Store ??autoDestroy ?????? true ??????????????????????????????????????Store ?????????????destroy() ??????????removeAll() ? Store ??????????????

Store ? storeId ??????????Ext.StoreMgr.get(<id>) ? Store ????????

[adapco]

Tommy1969?????????????

destroy()????????????????????
Ext.StoreMgr.get()???????????????? ComboBox.getStore()?????????????

??????????????????????????
Field->ComboBox->Store
???????????????????????Store?????????
???????????ComboBox???????????????Field????????
?????Field?parent()?HTML?Field????????

????????????????????????????????????
???????????????

???????????

[Tommy1969]

?????????????
??????????????????????????????????????????????

??? textfield ? combobox ?????????????? combobox ????????
store ???? loadData ???????????????????…?

…???????????????????????

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />

<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js">	</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js">				</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/src/locale/ext-lang-ja.js" charset="utf-8"></script>

<script type="text/javascript">
ex = {
	// ?????????
	getForm: function() {
		var form = new Ext.form.FormPanel({
			title:	'Sample',
			width:	320,
			items:	[
				this._makeCombo('??', 'sst', this._changeComboValues),
				this._makeCombo('??', 'est')
			]
		});

		return form;
	},
	// ?????????
	_makeCombo: function(name, stId, changefunc) {
		// ???????????
		var st	= new Ext.data.ArrayStore({
			storeId:	stId,
			fields:		['code', 'label'],
			data:		[
				[1, 'dummy1'],
				[2, 'dummy2']
			]
		});

		// ???????
		var cmb = new Ext.form.ComboBox({
			fieldLabel:		name,
			store:			st,
            hiddenName: 	'code',
            displayField:	'label',
            valueField:		'code',
            mode:			'local'
		});

		// ?????? change ?????????????
		if (changefunc) {
			cmb.on('change', changefunc)
		}

		return cmb;
	},
	// ?????????????????
	_changeComboValues: function(cmb, newVal, oldVal) {
		var st = Ext.StoreMgr.get('est');

		st.loadData([
			[3, 'dummy3'],
			[4, 'dummy4']
		]);

		Ext.Msg.alert('Debug', '?? combobox ????????????');
	}
};

Ext.onReady(function() {
	var form = ex.getForm();
	form.render('test');
});
</script>

</head>
<body>

<div id="test">
</div>

</body>
</html>

? Safari on Mac OS X ??????Chrome, Firefox ????????????? IE ??????????????