Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2010
    Posts
    29
    Vote Rating
    0
    masayuki_yamaoka is on a distinguished road

      0  

    Default ボタンの背景画像の設定について

    ボタンの背景画像の設定について


    画面に配置したボタンの背景をオリジナルの画像に変えたいと思い、以下のようにスタイルシートの背景画像ファイルを設定しました。
    ※ボタンに貼り付ける画像はネットから適当に探してきたものです。

    [ my.css ]
    x-btn-mc{
    background-image:url(./sample.gif);
    }

    しかし、ボタンの周りの枠はでるものの、ボタンの表面部分が真っ白なままで何も表示されません。

    ボタンに画像を貼り付けるにあたり、何か画像のサイズや色数など制約があるのでしょうか?

    ボタンは、以下のように作成しています。

    <link rel="stylesheet" type="text/css" href="./my.css" />
    var form_items = [
    {xtype:'button', name:'menu-group', height:'50', width:'300'}
    ];


    Ext.onReady(function(){
    var viewport = new Ext.Viewport({
    items: form_items
    });
    });

  2. #2
    Sencha - Support Team yuki's Avatar
    Join Date
    Jun 2007
    Location
    Chigasaki, Japan
    Posts
    273
    Vote Rating
    0
    yuki is on a distinguished road

      0  

    Default


    x-btn-mcには、background-image以外に、backgroundプロパティも設定されているため、そちらについても再設定する必要があります:

    Code:
    background: none repeat-x scroll 0 -1096px transparent;
    sample.gifがどういう画像かにもよりますが、background-imageを指定しただけでは1096pxオフセットされて空白になってしまうはずです。
    Ext Japan, LLC [Twitter: @extjapan]
    [Ext JS / Ext GWTのライセンス販売][日本語テクニカルサポート][Ext JSトレーニング・コンサルティング]

Thread Participants: 1