1

私はextjs4+yiiフレームワークでWebサイトを開発しています。ビューポートとして境界線レイアウトを使用しています。その中で私はアコーディオンレイアウトを使用していて、ホームページを表示しています。ホームページには、liginの完了後に非表示にしたいログインウィンドウがあります。このウィンドウを削除するにはどうすればよいですか。これが私のコードです:-

1)Viewport.js:-
Ext.define('AM.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    id:'vp',
    border: 5,
    style: {
        borderColor: 'red',
        borderStyle: 'solid'
    },
    requires: [
               'AM.view.header.Header',
               'AM.view.login.Login',
               'AM.view.wordOfDay.WordOfDay',
               'AM.view.weather.Weather',
               'AM.view.poll.Poll',
               'AM.view.qod.QOD',
               'AM.view.history.History',
               'AM.view.qod.LastQuestion'
              ],


    items: [
    {
        region:'north',
        xtype: 'headerHeader',
        margins:5,
        height:70,
        //html:'<h1>Welcome</h1>',
    },
    {
    /*  title:'West',
        region:'west',
        margins:'0 5 0 5',
        flex:.3,
        collapsible:true,
        split:true,
        titleCollapse:true,
    */  

    //  title:'Main menu',

        region:'west',
        margins:'0 5 5 5',
        flex:.3,
        //collapsible:true,
        //titleCollapse:true,
        layout:'accordion',
        layoutConfig:
        {
                animate:false,
                multi:true
        },
        items:[
        {
            title:'wordOfDay',
            xtype:'wod' 
        },
        {
            title:'weather Information',
            xtype:'weather' 
        },
        {
            title:'poll of the day',
            xtype:'poll'
        },
        {
            title:'questionOfDay',
            xtype:'questionOfDay'
        }
        ]//end if items

    },
    {
        //title:'center',
        region:'center',
        html:'center region'
    },
    {
    /*  //title:'East',
        xtype:'loginLogin',
        region:'east',
        margins:'0 5 0 5',
        width:200,
        //collapsible:true,
        //collapsed:true,
    */
        region:'east',
        margins:'0 5 0 5',
        flex:.3,
        //collapsible:true,
        //titleCollapse:true,
        layout:'accordion',
        layoutConfig:
        {
                animate:false,
                multi:true
        },
        items:[
        {
            title:'Login Window',
            xtype:'loginLogin'
        },       
        {
            title:'QuestionOfDay',
            xtype:'questionOfDay'
        },
        {
            title:'Last Question And its answer',
            xtype:'lastQusetion'
        },
        {
            title:'This Day In a History',
            xtype:'history'
        }
        ]//end if items
    },
    {
        //title:'South',
        region:'south',
        margins:'0 5 5 5',
        flex:.1,
        html:'<h6 align="center">Footer</h6>',
        split:false
    },//mainMenu   // used mainMenu when you are using mainMenu variable
    ]//end if items
});//End of view port

2)Login.js :-- this is the login view page
Ext.define('AM.view.login.Login',
{
        extend:'Ext.form.Panel',
        id:'lg',
        alias:'widget.loginLogin',
        bodyStyle:'padding:5px 5px 0',
        title:'Login Window',
        hidden:false,
        height: 150,
        //items:
        //[
         //{
             //xtype:'form',
             border:3,
             items:[
                    {
                        xtype:'textfield',
                        fieldLabel:'Key In',
                        name:'uname',
                        //width:'10px',
                        anchor:'100%',
                        //flex:2,
                        //labelAlign:'top',               
                        //  cls:'field-margin',
                        allowBlank:false,
                        //minLength:6,
                        //draggable:true,
                    },
                    {
                        xtype:'textfield',
                        fieldLabel:'Key',
                        //width:'20px',
                        flex:6,
                        //labelAlign:'top',
                        name:'pass',
                        inputType:'password',
                        allowBlank:false,
                        minLength:6,
                        anchor:'100%',

                    },
                    {
                        xtype:'button',
                        formBind: true,
                        fieldLabel:'Keylogin',
                        action:'loginAction',
                        text:'login',
                        //width:'20px',
                        flex:6,
                        //labelAlign:'top',

                        anchor:'100%',

                    }
                    ],  
         //}],//end of items
});//End

3)そしてここにコントローラーファイルのいくつかのコードがあります

authenticateUser:function(button)
{   
    console.log('enter');
    var obj = Ext.ComponentQuery.query('#vp');

    obj[0].remove('lg');
}    

コードは実行中ですが、ログインウィンドウは非表示になりません。提案をお願いします。よろしくお願いします。

4

2 に答える 2

3

Ext.ComponentQuery.query()メソッドは常にオブジェクトの配列を返すため、コードを変更var obj = Ext.ComponentQuery.query('#vp');var obj = Ext.ComponentQuery.query('#vp')[0];て、配列の最初の要素を取得します。この最初の要素がnullかどうかを確認する必要があります

于 2012-12-13T12:00:48.993 に答える
1

あなたの窓の最初は窓ではなくパネルですよね?右。次に、removeメソッドの使用は、コンテナーがその子アイテムを削除することです。例:MyPanel.remove(subPanel); -これにより、サブパネル http://docs.sencha.com/ext-js/4-1/source/AbstractContainer.html#Ext-container-AbstractContainer-method-removeが削除されます

第3に、ComponentQuery.query(selector)は、オブジェクトが1つしか見つからない場合でも、オブジェクトの配列を返します。使用方法とさまざまなスレクタータイプについては、ドキュメントをお読みください:http: //docs.sencha.com/ext-js/4-1/# !/api/Ext.ComponentQuery

于 2012-12-14T05:19:15.660 に答える