Day CQ5でサイトを開発しましたが、問題が発生しました。コンポーネントとそのダイアログを作成しています。ダイアログで、いくつかの要素「パスフィールド」を含むコンポーネント要素「マルチフィールド」を使用します。特定の数の要素「pathfield」を設定し、ボタン「+」と「-」を削除するにはどうすればよいですか?
5 に答える
私は今週、この正確な問題に遭遇しました:)
デフォルトでは、エディターが入力できる項目の数を制限できないようです。この問題を解決するために、に配置されたMultifield.jsのオーバーレイを作成しました
/apps/cq/ui/widgets/source/widgets/form/MultiField.js
マルチフィールドの下のfieldConfigノードに設定された「limit」プロパティのチェックを追加しました。存在し、ゼロでない場合、ユーザーが追加できるフィールドの最大数としてこれを使用します。
完全なオーバーレイを投稿して著作権の問題に巻き込まれたくないのですが、私が行った変更は次のとおりです。
コンストラクター(行#53)で、fieldConfigノードからlimitの値を取得するためのチェックを追加します。
if (!config.fieldConfig.limit) {
config.fieldConfig.limit = "0";
}
「+」ボタンのハンドラー(行#71)で、関数を次のように変更します。
if(config.fieldConfig.limit == 0 || list.items.getCount() <= config.fieldConfig.limit) {
list.addItem();
} else {
CQ.Ext.Msg.show({
title: 'Limit reached',
msg: 'You are only allowed to add ' + config.fieldConfig.limit +
' items to this module',
icon:CQ.Ext.MessageBox.WARNING,
buttons: CQ.Ext.Msg.OK
});
}
ボタンを削除するのではなく、「Nは許可されるフィールドの最大数」であることをエディターに通知するポップアップを作成しました。
簡単な変更ですが、仕事はできます!これがお役に立てば幸いです。
マルチフィールドノードと並行してリスナーを追加することもできます。例えば
イベント:beforeadd
働き:
function(list,component,index) {
if(this.fieldConfig.limit!=0) {
if(this.fieldConfig.limit == (list.items.getCount()-1)) {
CQ.Ext.Msg.show(
{title: 'Limit reached', msg: 'You are only allowed to add '+this.fieldConfig.limit+' items to this module',icon:CQ.Ext.MessageBox.WARNING,buttons: CQ.Ext.Msg.OK}
);;return false;
}
}
}
前提条件:マルチフィールドのfieldConfigに制限値を追加します。
私はこの問題の標準的な解決策をまだ見つけていませんが、ちょっとしたトリックを思いつきました。最初に、コンポーネントのダイアログを介して、必要な数の子要素を追加します。次に、プロパティ「class」を要素「multifield」に追加します(例:「sliderpanel-dialog-multifield」)。次に、CSSスタイルのような構造をコンポーネントに追加します。
.sliderpanel-dialog-multifield .x-btn{
display: none;
}
「.x-btn」は、CQ5のボタンを使用するクラスです。その後、ボタンは非表示になり、マルチフィールドで要素を追加または削除することはできません。この問題はリスナーとスクリプトの助けを借りて解決できるという別の提案がありますが、上で引用したように、解決するのは難しいでしょう。私はこれまでこの変種に焦点を当ててきましたが、他のアイデアがあれば、それらを知りたいと思います。
beforeaddソリューションに問題があるようです。フォーム/ダイアログが無効な状態になり、マークされたフィールドを修正するように指示されます...しかし、すべてが正しいです。
フォームの検証を再初期化する方法はありますか?
制限に達したら[アイテムの追加]ボタンを削除して機能を実装したこの投稿を参照してください。
http://letsaem.blogspot.in/2015/12/add-limit-to-number-of-elements-in.html
ただし、実装のプロセスは次のとおりです。
- fieldConfigノードに制限**(long)**プロパティを追加します
- マルチフィールドxtypeにリスナーノードを追加し、次のリスナーを追加します。
削除されたアイテム:
function(list) {
var length = list.items.length;
if (length <= list.fieldConfig.limit) {
list.items.items[length - 1].show();
}
}
beforeadd:
function(list, component, index) {
var length = list.items.length;
var addButton = list.items.items[length - 1];
if (length == list.fieldConfig.limit) {
addButton.hide();
}
}
今あなたが制限を与えるならば:3
3つのアイテムを追加すると、[アイテムの追加]ボタンが消えます
アイテムの追加ボタンが消えます: