隨筆-126  評(píng)論-247  文章-5  trackbacks-0

          示例效果圖


          示例代碼

          package fan.tutorial.client.ui.btn;

          import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
          import com.extjs.gxt.ui.client.event.ButtonEvent;
          import com.extjs.gxt.ui.client.event.SelectionListener;
          import com.extjs.gxt.ui.client.util.IconHelper;
          import com.extjs.gxt.ui.client.widget.Html;
          import com.extjs.gxt.ui.client.widget.LayoutContainer;
          import com.extjs.gxt.ui.client.widget.Window;
          import com.extjs.gxt.ui.client.widget.button.Button;
          import com.extjs.gxt.ui.client.widget.layout.FitLayout;
          import com.google.gwt.user.client.Element;

          public class ButtonExample extends LayoutContainer {

              @Override
              protected void onRender(Element parent, int index) {
                  super.onRender(parent, index);
                  final Window win = new Window();
                  win.setHeadingHtml("Button Example");
                  win.setSize(450, 400);
                  win.setShadow(false);
                  win.setMaximizable(false);
                  win.setLayout(new FitLayout());
                  win.add(new Html("<p style='font-size:28px;padding:15px;'>This is a example.</p>"));
                  
                  //創(chuàng)建按鈕, 并給按鈕設(shè)置圖標(biāo)
                  Button saveButton = new Button("保存", IconHelper.createStyle("save-icon"));
                  //為按鈕添加監(jiān)聽事件
                  saveButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
                      @Override
                      public void componentSelected(ButtonEvent ce) {
                          //do something
                          win.hide();
                      }
                  });
                  //設(shè)置窗口按鈕的對(duì)齊方式
                  win.setButtonAlign(HorizontalAlignment.RIGHT);
                  //為窗口添加按鈕組件
                  win.addButton(saveButton);
                  win.addButton(new Button("取消"));
                  
                  win.show();
              }
          }

          這是在之前的 Window 示例中添加 Button 按鈕,Window 組件代碼就不再解釋了。在 GXT 組件中使用圖標(biāo),可以通過編寫對(duì)應(yīng)的 CSS 樣式來(lái)實(shí)現(xiàn)。

          編寫圖標(biāo)樣式 CSS

          .save-icon {
              background
          : url("../resources/images/save.png");
          }

          編寫完兒后,別忘了將該 CSS 文件引入到 html 文件中哦。






            
          posted on 2014-06-08 11:19 fancydeepin 閱讀(1348) 評(píng)論(1)  編輯  收藏

          評(píng)論:
          # re: GXT —— Button 組件 2014-07-22 08:41 | 魔術(shù)師
          你覺得 gxt和javafx比較會(huì)怎么樣?  回復(fù)  更多評(píng)論
            

          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 灵台县| 凤凰县| 仁布县| 扶沟县| 义马市| 同德县| 泸溪县| 天等县| 班戈县| 林芝县| 巴楚县| 莒南县| 松阳县| 黄浦区| 益阳市| 延津县| 南通市| 肃南| 区。| 兴山县| 义乌市| 卢龙县| 眉山市| 新郑市| 安达市| 当雄县| 安义县| 禄丰县| 安阳县| 蓝田县| 全椒县| 安塞县| 武安市| 中山市| 宁安市| 长垣县| 宜城市| 南澳县| 新蔡县| 曲阜市| 康定县|