column layout - column width | Community
Skip to main content
Level 4
October 16, 2015
Question

column layout - column width

  • October 16, 2015
  • 2 replies
  • 971 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

kautuk_sahni
Community Manager
Community Manager
October 16, 2015

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
edubey
Level 10
October 16, 2015

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