ui: iso selector: fix layout, stretch items again to full space

[pve-manager.git] / www / manager6 / form / IPRefSelector.js

Ext.define('PVE.form.IPRefSelector', {
    extend: 'Proxmox.form.ComboGrid',
    alias: ['widget.pveIPRefSelector'],

    base_url: undefined,

    preferredValue: '', // hack: else Form sets dirty flag?

    ref_type: undefined, // undefined = any [undefined, 'ipset' or 'alias']

    valueField: 'scopedref',
    displayField: 'ref',
    notFoundIsValid: true,

    initComponent: function() {
	var me = this;

	if (!me.base_url) {
	    throw "no base_url specified";
	}

	var url = "/api2/json" + me.base_url;
	if (me.ref_type) {
	    url += "?type=" + me.ref_type;
	}

	var store = Ext.create('Ext.data.Store', {
	    autoLoad: true,
	    fields: [
		'type',
		'name',
		'ref',
		'comment',
		'scope',
		{
		    name: 'scopedref',
		    calculate: function(v) {
			if (v.type === 'alias') {
			    return `${v.scope}/${v.name}`;
			} else {
			    return `+${v.scope}/${v.name}`;
			}
		    },
		},
	    ],
	    idProperty: 'ref',
	    proxy: {
		type: 'proxmox',
		url: url,
	    },
	    sorters: {
		property: 'ref',
		direction: 'ASC',
	    },
	});

	var disable_query_for_ips = function(f, value) {
	    if (value === null ||
		value.match(/^\d/)) { // IP address starts with \d
		f.queryDelay = 9999999999; // hack: disable with long delay
	    } else {
		f.queryDelay = 10;
	    }
	};

	var columns = [];

	if (!me.ref_type) {
	    columns.push({
		header: gettext('Type'),
		dataIndex: 'type',
		hideable: false,
		width: 60,
	    });
	}

	columns.push(
	    {
		header: gettext('Name'),
		dataIndex: 'ref',
		hideable: false,
		width: 140,
	    },
	    {
		header: gettext('Scope'),
		dataIndex: 'scope',
		hideable: false,
		width: 140,
		renderer: function(value) {
		    return value === 'dc' ? gettext("Datacenter") : gettext("Guest");
		},
	    },
	    {
		header: gettext('Comment'),
		dataIndex: 'comment',
		renderer: Ext.String.htmlEncode,
		minWidth: 60,
		flex: 1,
	    },
	);

	Ext.apply(me, {
	    store: store,
            listConfig: {
		columns: columns,
		width: 500,
	    },
	});

	me.on('change', disable_query_for_ips);

        me.callParent();
    },
});