プライムフェイスのダイアログプロパティをJavaスクリプトから設定する

Question

JSやjQueryに関する深い知識はありません。私が達成しようとしているのは、私が見せてくれる対話が少なく、彼らに共通のルック・アンド・フィールを与えたいということです。私はそれぞれを表示するjs関数を呼び出しています。私は<p:dialog ></p:dialog>タグでプロパティを設定できることを知っています。しかし、アプリケーションのすべての対話に対処するためにプロパティを設定するモジュール式のアプローチが必要なので、私はこのアプローチを望んでいません。

関数定義：

function editPartner(dialog){ 
     dialog.cfg.height = '500px'; 
     dialog.cfg.width = '600px'; 
     dialog.cfg.minHeight = '500px'; 
     dialog.cfg.minWidth = '600px'; 
     dialog.show(); 
} 

そして、それを呼び出す

<p:commandButton id="editButton" oncomplete="editPartner(PF('DialogEditPartner'))" /> 

からではなく、幅と高さの設定がダイアログに反映されていません。

プライム面component.jsからわずかリファレンス、私は身長と体重 がCFGオブジェクトから設定されて見ることができます。 完全なコード：：私は私の答えを編集ANS私の完全なコードを示しコメントに基づい

PrimeFaces.widget.Dialog = PrimeFaces.widget.BaseWidget.extend({ 
init: function(a) { 
    this._super(a); 
    this.content = this.jq.children(".ui-dialog-content"); 
    this.titlebar = this.jq.children(".ui-dialog-titlebar"); 
    this.footer = this.jq.find(".ui-dialog-footer"); 
    this.icons = this.titlebar.children(".ui-dialog-titlebar-icon"); 
    this.closeIcon = this.titlebar.children(".ui-dialog-titlebar-close"); 
    this.minimizeIcon = this.titlebar.children(".ui-dialog-titlebar-minimize"); 
    this.maximizeIcon = this.titlebar.children(".ui-dialog-titlebar-maximize"); 
    this.blockEvents = "focus." + this.id + " mousedown." + this.id + " mouseup." + this.id; 
    this.resizeNS = "resize." + this.id; 
    this.cfg.absolutePositioned = this.jq.hasClass("ui-dialog-absolute"); 
    this.cfg.width = this.cfg.width || "auto"; 
    this.cfg.height = this.cfg.height || "auto"; 
    this.cfg.draggable = this.cfg.draggable === false ? false : true; 
    this.cfg.resizable = this.cfg.resizable === false ? false : true; 
    this.cfg.minWidth = this.cfg.minWidth || 150; 
    this.cfg.minHeight = this.cfg.minHeight || this.titlebar.outerHeight(); 
    this.cfg.position = this.cfg.position || "center"; 

Answer 1

<script type="text/javascript"> 
function editPartner(dialog){ 
    alert(dialog); 

     dialog.show(); 

     var myDialog = document.getElementById(dialog.id); 
     myDialog.style.height = '500px'; 
     myDialog.style.width = "600px"; 
     myDialog.style.minHeight = '500px'; 
     myDialog.style.minWidth = '600px'; 

} 
</script> 
</h:head> 
<h:body> 
    <h1>Hello Raaj, this is for you</h1> 

    <div style="height: 500px"> 

<p:growl id="grwl" showDetail="true" /> 
<p:commandButton id="editButton" value="stackoverflow problem" oncomplete="editPartner(PF('dialogForRaajVar'))" /> 


    <p:dialog widgetVar="dialogForRaajVar" draggable="true" id="dialogForRaaj" 
       modal="true" showEffect="fade" showHeader="true" 
       hideEffect="fade" resizable="false"> 
       <p:commandButton value="Close" 
        actionListener="#{dashboardView.addDiklat(actionevent)}" 
        update=":mainForm,grwl" oncomplete="PF('frmDiklat').hide()"> 
        </p:commandButton> 


       </p:dialog>