Results 1 to 5 of 5

Thread: ComboBox???????????????

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    ??????
    Posts
    10

    Default ComboBox???????????????

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

    ??????????

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

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

    ????????
    Code:
    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???????????????????
    HTML Code:
    <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????????????????????????????????
    ??????????????????????????????????????

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

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    ??????
    Posts
    10

    Default

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

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

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

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

  3. #3

    Default

    ??????? (??????????????) ?????????

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

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

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    ??????
    Posts
    10

    Default

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

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

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

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

    ???????????

  5. #5

    Default

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

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

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

    Code:
    <!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 ??????????????

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •