示例效果圖

示例代碼
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();
}
}
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");
}
background: url("../resources/images/save.png");
}
編寫完兒后,別忘了將該 CSS 文件引入到 html 文件中哦。