随笔-126  评论-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>"));
        
        //创建按钮, 并给按钮设置图标
        Button saveButton = new Button("保存", IconHelper.createStyle("save-icon"));
        //为按钮添加监听事件
        saveButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
            @Override
            public void componentSelected(ButtonEvent ce) {
                //do something
                win.hide();
            }
        });
        //设置窗口按钮的对齐方式
        win.setButtonAlign(HorizontalAlignment.RIGHT);
        //为窗口添加按钮组件
        win.addButton(saveButton);
        win.addButton(new Button("取消"));
        
        win.show();
    }
}

这是在之前的 Window 示例中添加 Button 按钮,Window 组件代码就不再解释了。在 GXT 组件中使用图标,可以通过编写对应的 CSS 样式来实现。

编写图标样式 CSS

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

编写完儿后,别忘了将该 CSS 文件引入到 html 文件中哦。






  
posted on 2014-06-08 11:19 fancydeepin 阅读(1324) 评论(1)  编辑  收藏

评论:
# re: GXT —— Button 组件 2014-07-22 08:41 | 魔术师
你觉得 gxt和javafx比较会怎么样?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: