package fan.tutorial.client.ui.bar;

import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.menu.Menu;
import com.extjs.gxt.ui.client.widget.menu.MenuItem;
import com.extjs.gxt.ui.client.widget.menu.SeparatorMenuItem;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.Element;

public class ToolBarExample extends LayoutContainer {

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        
        //創建內容面板
        ContentPanel panel = new ContentPanel();
        panel.setHeadingHtml("ToolBar Example");
        panel.setSize(650, 400);
        
        //創建2個圖標Button
        Button addUserButton = new Button("Add User", IconHelper.createStyle("user-add-icon"));
        Button deleteUserButton = new Button("Delete User", IconHelper.createStyle("user-delete-icon"));
        
        //創建一個菜單
        Menu addUserMenu = new Menu();
        //為菜單添加2個操作選項
        addUserMenu.add(new MenuItem("Add"));
        addUserMenu.add(new SeparatorMenuItem());
        addUserMenu.add(new MenuItem("Existing import"));
        //設置為按鈕菜單
        addUserButton.setMenu(addUserMenu);
        
        //將按鈕添加到ToolBar
        ToolBar toolBar = new ToolBar();
        toolBar.add(addUserButton);
        toolBar.add(new SeparatorToolItem());
        toolBar.add(deleteUserButton);
        toolBar.add(new SeparatorToolItem());
        
        //設置面板的ToolBar
        panel.setTopComponent(toolBar);
        
        add(panel);
    }
}