3

グリッドビューにExtJSを使用していますが、グリッドの上に検索オプションが必要です。そこで、パネルを作成し、テキストボックスや2つのボタンなどのアイテムを追加しました。レイアウト以外はすべて正常に動作します。テキストボックスと2つのボタンを、垂直方向ではなく水平方向に配置する必要があります。私はすでにスタイルのようなhtml要素を挿入しようとしましたが成功しませんでした。

コンテナ内でコンポーネントを水平に配置するにはどうすればよいですか？

   var formPanel=Ext.create('Ext.form.Panel', {
        title: 'Catalog Search',
        width:300,
        bodyPadding: 10,
        submitOnAction: true,
        activeItem: 1,
        items: [{
            xtype: 'textfield',
            name: 'Job Name',
            id:'JobName',
            fieldLabel: 'Job Name',
            allowBlank: false,

           }, {
            xtype: 'button',
            name: 'search',
            fieldLabel: 'Catalog Search',
            text: 'Search',
             html:'style=float:left',
            width:100,

            listeners:{
                click:function(){
                    var searchText=Ext.getCmp('JobName').getValue();
                    store.proxy.extraParams={
                        id: searchText
                    };
                    store.load();
                }
            }
        },
        {
            xtype: 'button',
            name: 'clear',
            fieldLabel: 'Clear',
            text: 'Clear',
            width:100,

            listeners:{
                click:function(){
                    Ext.getCmp('JobName').reset();
                     var searchText='';
                    store.proxy.extraParams={
                        id: searchText

                    };
                   store.load();
                }
            }
        }
        ]


    });
    formPanel.render('paging-grid');
4

1 に答える 1

4

そのような場合には、hbox のような適切なレイアウトを使用する必要があります。

この作業例を参照してください ( JSFiddle )

var formPanel=Ext.create('Ext.form.Panel', {
    title: 'Catalog Search',
    width:500,
    bodyPadding: 10,
    renderTo: 'paging-grid',
    submitOnAction: true,
    layout: 'hbox',

    items: [{
        xtype: 'textfield',
        name: 'Job Name',
        id:'JobName',
        fieldLabel: 'Job Name',
        allowBlank: false,
        flex: 1
       }, {
        xtype: 'button',
        name: 'search',
        fieldLabel: 'Catalog Search',
        text: 'Search',
        style: 'margin-left: 10px',
        width: 70
    },
    {
        xtype: 'button',
        name: 'clear',
        fieldLabel: 'Clear',
        text: 'Clear',
        style: 'margin-left: 10px',
        width: 70
    }
    ]
});

ところで：ボタンにhandlerは、ラップされclickたイベントであるプロパティがあります。リスナーに自分自身を登録する必要なく、そのメソッドに関数を直接提供できます。

于 2013-02-01T10:15:58.293 に答える