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 样式来实现。