PDA

View Full Version : ComboBox???????????????



adapco
22 Apr 2010, 6:56 PM
????????????????????????

??????????

???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
23 Apr 2010, 2:14 AM
?????????????(???)
?????????id?????

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

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

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

Tommy1969
26 Apr 2010, 9:21 PM
??????? (??????????????) ?????????

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

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

adapco
30 Apr 2010, 5:21 PM
Tommy1969?????????????

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

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

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

???????????

Tommy1969
4 May 2010, 6:32 PM
?????????????
??????????????????????????????????????????????

??? 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 ??????????????