0

ログインとリセットの 2 つのボタンを備えた ExtJs フォーム パネルを含むログイン画面があります。現在、新しいユーザーのサインアップのために、lofin パネルの下に別のボタンを追加しようとしています。しかし、ボタンが画面の一番下に出て、スクロール バーが表示され、ページが見苦しくなります。

login.jsp ファイルにこれらがあります。

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">   
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>

そして、これは私の app.js ファイルです:

Ext.onReady(function(){
    Ext.QuickTips.init();
    var login = new Ext.FormPanel({
        labelWidth:100,
        frame:true,
        title:'Member Login',
        defaultType:'textfield',
        monitorValid:true,

        // Specific attributes for the text fields for username / password. 
        // The "name" attribute defines the name of variables sent to the server.
        items:[{
            fieldLabel:'Username',
            name:'loginUsername',
            allowBlank:false
        },{
            fieldLabel:'Password',
            name:'loginPassword',
            inputType:'password',
            allowBlank:false
        }],

        buttons: [{    
            text: 'New User Register',
            scale: 'medium',
            handler: function()
            {        
                login.getForm().doAction('standardsubmit',{
                    target : '_self',
                    method : 'POST',
                    standardSubmit:true,
                    formBind: false,
                    url: 'registration.jsp'
                })
            }
        },{
            text: 'Login',
            scale: 'medium',
            handler: function()
            {
                login.getForm().doAction('standardsubmit',{
                    target : '_self',
                    method : 'POST',
                    standardSubmit:true,
                    formBind: true,
                    url: 'index.jsp'
                })
            }
        },{
            text: 'Reset',
            scale: 'medium',
            handler: function(){
                login.getForm().reset();
            }
        }]
    });

    // This just creates a window to wrap the login form. 
    // The login object is passed to the items collection.       
    var win = new Ext.Window({
        layout:'fit',
        width:325,
        height:175,
        closable: false,
        resizable: false,
        plain: true,
        border: false,    

        items: [login]
    });
    win.show();    
});

上記の最後にを使用して新しいボタンを追加しようとしましたExt.Createが、機能しません。コードを別のjsファイルに入れ、srcを含むスクリプトタグを別のスクリプトタグのパネルファイルとともにボタンファイルに追加しようとしましたが、それでも失敗しました。

別のボタンと希望の位置を作成するのを手伝ってくれる人はいますか? どんな種類の助けも大歓迎です。ありがとう。

私はあらゆる場所を調べ、できる限りのことを試みましたが、答えを思いつくことができません。

注:コードにより、質問が非常に長く大きく見えますが、私の主なクエリと問題は質問の上部と下部にあります。

4

1 に答える 1

0

ログインパネル内に新しいボタンを追加したくないと仮定しています。それ以外の場合は、とにかくボタンリストに別のボタンを追加することができます。ログイン パネルの下にボタンを追加し、まだウィンドウ内にボタンを追加するには、次の手順を実行します。

  1. フォーム パネルをコンテナー内のアイテムとして配置する

  2. フォーム パネルの後に、コンテナー内の 2 番目のアイテムとしてボタンを追加します。

  3. パネルをウィンドウに追加したように、コンテナーをウィンドウに追加します。

出来上がり！ウィンドウと ' id' などの ' id=loginWindow' を指定してから、コードを呼び出してみることもできます

Ext.getCmp('loginWindow').add(
    {
     xtype:button,
     text:'Yay!'
     }
);

コード固有のヘルプが必要な場合は、お気軽に私にメッセージを送ってください。私はあなたの気持ちを知っています仲間<3

于 2014-01-21T11:38:35.863 に答える