Expand my Community achievements bar.

column layout - column width

Avatar

Level 4

Hi,

i have a column layout like this:

<tab1 jcr:primaryType="cq:Widget" hideMode="offsets" title="Column 1" xtype="panel"> <items jcr:primaryType="cq:WidgetCollection"> <Link jcr:primaryType="cq:Widget" cls="headerBold" layout="column" title="link" xtype="dialogfieldset"> <items jcr:primaryType="cq:WidgetCollection"> <title jcr:primaryType="cq:Widget" emptyText="text" name="./title1" xtype="textfield"/> <url jcr:primaryType="cq:Widget" emptyText="url" name="./link1" xtype="pathfield"/> </items> </Link> </items> </tab1>

How can i set a percentege width?

 

I have also a similar problem with a custom field:

CompositeLink = CQ.Ext.extend(CQ.form.CompositeField, { constructor: function (config) { config = config || {}; var defaults = { "border": false, "layout": "form" }; config = CQ.Util.applyDefaults(config, defaults); CompositeLink.superclass.constructor.call(this, config); }, //overriding CQ.Ext.Component#initComponent initComponent: function () { CompositeLink.superclass.initComponent.call(this); // Hidden field this.hiddenField = new CQ.Ext.form.Hidden({ name: this.name }); this.add(this.hiddenField); this.mainPanel = new CQ.Ext.Container({ layout:"column", autoScroll:true }); this.add(this.mainPanel); this.nameLink = new CQ.Ext.form.TextField({ emptyText:"text", listeners: { change: { scope: this, fn: this.updateHidden } } }); this.mainPanel.add(this.nameLink); this.urlLink = new CQ.form.PathField({ emptyText:"url", listeners: { change: { scope: this, fn: this.updateHidden }, dialogclose: { scope: this, fn: this.updateHidden } } }); this.mainPanel.add(this.urlLink); // Link openInNewWindow this.targetLink = new CQ.Ext.form.ComboBox({ triggerAction: 'all', mode: 'local', store: new CQ.Ext.data.ArrayStore({ fields: [ 'myId', 'displayText' ], data: [['inject', 'inject'], ['_self', 'self'], ['_blank', 'blank'], ['overlay', 'overlay']] }), valueField: 'myId', displayField: 'displayText', forceSelection: true, emptyText:'target', listeners:{ scope: this, 'select': this.updateHidden }, }); this.mainPanel.add(this.targetLink ); }, processInit: function (path, record) { this.nameLink.processInit(path, record); this.urlLink.processInit(path, record); this.targetLink.processInit(path, record); }, setValue: function (value) { var items = value.split("|"); if (items.length > 0) this.nameLink.setValue(items[0]); if (items.length > 1) this.urlLink.setValue(items[1]); if (items.length > 2) this.targetLink.setValue(items[2]); this.hiddenField.setValue(value); }, getValue: function () { return this.getRawValue(); }, getRawValue: function () { var link = this.nameLink.getValue() + "|" + this.urlLink.getValue() + "|" + this.targetLink.getValue(); return link; }, updateHidden: function () { this.hiddenField.setValue(this.getValue()); } }); CQ.Ext.reg('compositelink', CompositeLink);

How can i set now the percentage width?

 

Thanks

2 Replies

Avatar

Level 10

Hi,

When working with column layout you have option for setting width in % using columnWidth,

Please refer to the complete explanation here @ https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.layout.ColumnLayout

Avatar

Administrator

Hi samuel786431

 

There is a community article on Creating custom columns, this article uses bootstrap for doing the same.

Link:- https://helpx.adobe.com/experience-manager/using/custom_columns.html

I hope this would help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni