Наверх

Combobox в виде динамических чекбоксов

Поля в форме:

{   /* При изменении значения этого комбобокса будут перестраиваться чекбоксы */
	xtype           : 'mycomponent-combo-select',
	fieldLabel      : _('mycomponent.select'),
	name            : 'select_id',
	anchor          : '99%',
	allowBlank      : false,
	listeners       : {
		'select'    : {
			fn          : function(tf, nv, ov) {
				if (Ext.get('mycomponent-checkbox-dynamic')) {
					Ext.get('mycomponent-checkbox-dynamic').parent().parent().remove();
				}
				Ext.getCmp('mycomponent-panel-checkboxes-panel').add({
					xtype       : 'mycomponent-checkbox-dynamic',
					fieldLabel  : _('mycomponent.checkboxes'),
					id          : 'mycomponent-panel-checkbox-dynamic',
					anchor      : '99%',
					select_id   : tf.value
				});
				Ext.getCmp('mycomponent-panel-checkboxes-panel').doLayout();
			},
			scope       : this
		},
		'render'    : {
			fn          : function(tf, nv, ov) {
				if (this.value) {
					Ext.getCmp('mycomponent-panel-checkboxes-panel').add({
						xtype       : 'mycomponent-checkbox-dynamic',
						fieldLabel  : _('mycomponent.checkboxes'),
						id          : 'mycomponent-panel-checkbox-dynamic',
						anchor      : '99%',
						select_id   : this.value,
						checked     : config.record.checkboxes
					});
					Ext.getCmp('mycomponent-panel-checkboxes-panel').doLayout();
				}
			}
		}
	}
}, { /* Здесь чекбоксы будут находится */
	xtype       : 'panel',
	layout      : 'form',
	id          : 'mycomponent-panel-checkboxes-panel',
	anchor      : '99%',
}


Combobox:

/* Checkbox group for Dynamic checkboxes */
MyComponent.checkbox.Dynamic = function(config)
{
    config = config || {};
    config.select_id = config.select_id || 0;
    config.checked = config.checked || [];
    config.record = config.record || {object: {id: 0}};
    Ext.applyIf(config,{
        id          : 'mycomponent-checkbox-dynamic',
        xtype       : 'checkboxgroup',
        cls         : 'mycomponent-checkbox-group-column',
        fieldLabel  : _('mycomponent.checkboxes'),
        columns     : 1,
        items       : [
            {
                boxLabel    : 'none',
                id          : 'mycomponent-checkbox-dynamic-none-checkbox'
            }
        ],
        listeners: {
            'render'        : {
                fn              : function() {
                    Ext.getCmp('mycomponent-checkbox-dynamic-none-checkbox').hide();

                    MODx.Ajax.request({
                        url         : MyComponent.config.connector_url,
                        params      : {
                            action      : 'mgr/checkboxes/getlist',
                            select_id  : config.select_id || 0
                        },
                        listeners       : {
                            success         : {
                                fn              : function(response) {
                                    for (var i = 0; i < response.results.length; i++) {
                                        this.panel.items.items.push(
                                                new Ext.form.Checkbox({
                                                    boxLabel        : response.results[i].title,
                                                    name            : 'checkboxes['+response.results[i].id+']',
                                                    /* value        : 12, */
                                                    checked         : config.checked[response.results[i].id] == 'on' ? true : false
                                                })
                                        );
                                    }
                                    this.items = this.panel.items;
                                    this.panel.doLayout();
                                },
                                scope           : this}
                        }
                    });
                },
                scope           : this
            }
        }
    });
    MyComponent.checkbox.Dynamic.superclass.constructor.call(this,config);
};
Ext.extend(MyComponent.checkbox.Dynamic, Ext.form.CheckboxGroup);
Ext.reg('mycomponent-checkbox-dynamic', MyComponent.checkbox.Dynamic);


0 комментариев

    Авторизация

    через сервис Loginza:


    Шаблоны MODX

    1 2 Дальше »

    Объектная
    модель
    MODX