`
iaiai
  • 浏览: 2197903 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

GXT自己封装的Calendar日历类

GWTUIGoogleEXTJ# 
阅读更多
因为项目需要自己扩展了一下gxt的日期类，做成一个日历，可往日历当中添加连接
必须要有GXT包，因为本个只是把GXT包中的类代码全复制出来然后改成自己所用的日历

下面是代码 
/*
 * Ext GWT 2.2.3 - Ext for GWT
 * Copyright(c) 2007-2010, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
package com.hantek.lms.widget.calendar.client;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Style.Direction;
import com.extjs.gxt.ui.client.aria.FocusFrame;
import com.extjs.gxt.ui.client.core.CompositeElement;
import com.extjs.gxt.ui.client.core.CompositeFunction;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FxEvent;
import com.extjs.gxt.ui.client.event.IconButtonEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.fx.FxConfig;
import com.extjs.gxt.ui.client.util.DateWrapper;
import com.extjs.gxt.ui.client.util.KeyNav;
import com.extjs.gxt.ui.client.util.Size;
import com.extjs.gxt.ui.client.util.Util;
import com.extjs.gxt.ui.client.widget.BoxComponent;
import com.extjs.gxt.ui.client.widget.Component;
import com.extjs.gxt.ui.client.widget.ComponentHelper;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.NodeList;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.LocaleInfo;
import com.google.gwt.i18n.client.constants.DateTimeConstants;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;

/**
 * Simple date picker.
 * 
 * <dl>
 * <dt><b>Events:</b></dt>
 * 
 * <dd><b>Select</b> : DatePickerEvent(datePicker, date)<br>
 * <div>Fires when a date is selected.</div>
 * <ul>
 * <li>datePicker : this</li>
 * <li>date : the selected date</li>
 * </ul>
 * </dd>
 * </dl>
 * 
 * <dl>
 * <dt>Inherited Events:</dt>
 * <dd>BoxComponent Move</dd>
 * <dd>BoxComponent Resize</dd>
 * <dd>Component Enable</dd>
 * <dd>Component Disable</dd>
 * <dd>Component BeforeHide</dd>
 * <dd>Component Hide</dd>
 * <dd>Component BeforeShow</dd>
 * <dd>Component Show</dd>
 * <dd>Component Attach</dd>
 * <dd>Component Detach</dd>
 * <dd>Component BeforeRender</dd>
 * <dd>Component Render</dd>
 * <dd>Component BrowserEvent</dd>
 * <dd>Component BeforeStateRestore</dd>
 * <dd>Component StateRestore</dd>
 * <dd>Component BeforeStateSave</dd>
 * <dd>Component SaveState</dd>
 * </dl>
 */
@SuppressWarnings("deprecation")
public class Calendar extends BoxComponent {

	/**
	 * DatePicker messages.
	 */
	public class DatePickerMessages {
		private String todayText = GXT.MESSAGES.datePicker_todayText();
		private String okText = GXT.MESSAGES.datePicker_okText();
		private String cancelText = GXT.MESSAGES.datePicker_cancelText();
		private String todayTip = GXT.MESSAGES
				.datePicker_todayTip(DateTimeFormat.getShortDateFormat()
						.format(new Date()));
		private String minText = GXT.MESSAGES.datePicker_minText();
		private String maxText = GXT.MESSAGES.datePicker_maxText();
		private String prevText = GXT.MESSAGES.datePicker_prevText();
		private String nextText = GXT.MESSAGES.datePicker_nextText();
		private String monthYearText = GXT.MESSAGES.datePicker_monthYearText();

		/**
		 * Sets the text to display on the cancel button.
		 * 
		 * @return the cancel button text
		 */
		public String getCancelText() {
			return cancelText;
		}

		/**
		 * Returns the max text.
		 * 
		 * @return the max text
		 */
		public String getMaxText() {
			return maxText;
		}

		/**
		 * Returns the min text.
		 * 
		 * @return the min text
		 */
		public String getMinText() {
			return minText;
		}

		/**
		 * Returns the month year text.
		 * 
		 * @return the month year text
		 */
		public String getMonthYearText() {
			return monthYearText;
		}

		/**
		 * Returns the next text.
		 * 
		 * @return the next text
		 */
		public String getNextText() {
			return nextText;
		}

		/**
		 * Returns the ok text.
		 * 
		 * @return the ok text
		 */
		public String getOkText() {
			return okText;
		}

		/**
		 * Returns the prev text.
		 * 
		 * @return the prev text
		 */
		public String getPrevText() {
			return prevText;
		}

		/**
		 * Returns the today text.
		 * 
		 * @return the today text
		 */
		public String getTodayText() {
			return todayText;
		}

		/**
		 * Returns the today tip.
		 * 
		 * @return the tip
		 */
		public String getTodayTip() {
			return todayTip;
		}

		/**
		 * Sets the cance text (default to "Cancel").
		 * 
		 * @param cancelText
		 *            the cancel text
		 */
		public void setCancelText(String cancelText) {
			this.cancelText = cancelText;
		}

		/**
		 * Sets the error text to display if the maxDate validation fails
		 * (defaults to "This date is after the maximum date").
		 * 
		 * @param maxText
		 *            the max error text
		 */
		public void setMaxText(String maxText) {
			this.maxText = maxText;
		}

		/**
		 * Sets the error text to display if the minDate validation fails
		 * (defaults to "This date is before the minimum date").
		 * 
		 * @param minText
		 *            the minimum error text
		 */
		public void setMinText(String minText) {
			this.minText = minText;
		}

		/**
		 * Sets the header month selector tooltip (defaults to 'Choose a month
		 * (Control+Up/Down to move years)').
		 * 
		 * @param monthYearText
		 *            the month year text
		 */
		public void setMonthYearText(String monthYearText) {
			this.monthYearText = monthYearText;
		}

		/**
		 * Sets the next month navigation button tooltip (defaults to 'Next
		 * Month (Control+Right)').
		 * 
		 * @param nextText
		 *            the next text
		 */
		public void setNextText(String nextText) {
			this.nextText = nextText;
		}

		/**
		 * Sets the text to display on the ok button.
		 * 
		 * @param okText
		 *            the ok text
		 */
		public void setOkText(String okText) {
			this.okText = okText;
		}

		/**
		 * Sets the previous month navigation button tooltip (defaults to
		 * 'Previous Month (Control+Left)').
		 * 
		 * @param prevText
		 *            the previous text
		 */
		public void setPrevText(String prevText) {
			this.prevText = prevText;
		}

		/**
		 * Sets the text to display on the button that selects the current date
		 * (defaults to "Today").
		 * 
		 * @param todayText
		 *            the today text
		 */
		public void setTodayText(String todayText) {
			this.todayText = todayText;
		}

		/**
		 * Sets the tooltip to display for the button that selects the current
		 * date (defaults to "{current date} (Spacebar)").
		 * 
		 * @param todayTip
		 *            the today tool tip
		 */
		public void setTodayTip(String todayTip) {
			this.todayTip = todayTip;
		}

	}

	class Header extends Component {

		protected void doAttachChildren() {
			ComponentHelper.doAttach(monthBtn);
			prevBtn.onAttach();
			nextBtn.onAttach();
		}

		protected void doDetachChildren() {
			ComponentHelper.doDetach(monthBtn);
			prevBtn.onDetach();
			nextBtn.onDetach();
		}

		@Override
		protected void onAttach() {
			super.onAttach();
		}

		@Override
		protected void onDetach() {
			super.onDetach();
		}

		@Override
		protected void onRender(Element target, int index) {
			StringBuffer sb = new StringBuffer();
			sb.append("<table width=100% cellpadding=0 cellspacing=0><tr>");
			sb
					.append("<td class=x-date-left></td><td class=x-date-middle align=center></td>");
			sb.append("<td class=x-date-right></td></tr></table>");

			setElement(XDOM.create(sb.toString()));
			el().insertInto(target, index);

			monthBtn = new Button("&#160;",
					new SelectionListener<ButtonEvent>() {
						public void componentSelected(ButtonEvent ce) {
							showMonthPicker();
						}
					}) {
				@Override
				protected void autoWidth() {
					if (!GXT.isAriaEnabled()) {
						super.autoWidth();
					}
				}
			};

			monthBtn.setToolTip(getMessages().getMonthYearText());
			monthBtn.render(el().selectNode(".x-date-middle").dom);
			monthBtn.el().child("em").addStyleName("x-btn-arrow");

			prevBtn = new IconButton("x-date-left-icon",
					new SelectionListener<IconButtonEvent>() {
						public void componentSelected(IconButtonEvent ce) {
							showPrevMonth();
						}
					});
			prevBtn.setToolTip(messages.getPrevText());
			prevBtn.render(el().selectNode(".x-date-left").dom);

			nextBtn = new IconButton("x-date-right-icon",
					new SelectionListener<IconButtonEvent>() {
						public void componentSelected(IconButtonEvent ce) {
							showNextMonth();
						}
					});
			nextBtn.setToolTip(messages.getNextText());
			nextBtn.render(el().selectNode(".x-date-right").dom);
		}

	}

	protected Button todayBtn;

	private int firstDOW;
	private Date minDate;
	private DateWrapper startDate,endDate;
	private Date maxDate;
	private int startDay = Integer.MIN_VALUE;
	private long today;
	private int mpyear;
	private Grid days, grid;
	private Header header;
	private com.google.gwt.user.client.ui.HorizontalPanel footer;
	private DateWrapper activeDate, value;
	private int mpSelMonth, mpSelYear;
	private Button monthBtn;
	private Element[] cells;
	private Element[] textNodes;
	private IconButton prevBtn, nextBtn;
	private CompositeElement mpMonths, mpYears;
	private El monthPicker;
	private DateTimeConstants constants;
	private DatePickerMessages messages;
	private El gridWrapper;

	private Map<Date, Map<String, Integer>> gridMap; // 存储日期是属于哪行哪列，自己扩展
	public static final String ROW = "row", CELL = "cell";

	/**
	 * 返回日期行跟列的对像
	 * 
	 * @return
	 */
	public Map<Date, Map<String, Integer>> getGridMap() {
		return gridMap;
	}

	/**
	 * Creates a new date picker.
	 */
	public Calendar() {
		baseStyle = "x-date-picker";
		messages = new DatePickerMessages();
		constants = LocaleInfo.getCurrentLocale().getDateTimeConstants();

		setLayoutData(new FitLayout());
	}

	@Override
	public void focus() {
		super.focus();
		update(activeDate);
	}

	/**
	 * Returns the field's maximum allowed date.
	 * 
	 * @return the max date
	 */
	public Date getMaxDate() {
		return maxDate;
	}

	/**
	 * Returns the data picker messages.
	 * 
	 * @return the date picker messages
	 */
	public DatePickerMessages getMessages() {
		return messages;
	}

	/**
	 * Returns the picker's minimum data.
	 * 
	 * @return the minimum date
	 */
	public Date getMinDate() {
		return minDate;
	}

	/**
	 * Returns the picker's start day.
	 * 
	 * @return the start day
	 */
	public int getStartDay() {
		return startDay;
	}

	/**
	 * Gets the current selected value of the date field.
	 * 
	 * @return the date
	 */
	public Date getValue() {
		return value != null ? value.asDate() : null;
	}

	@Override
	public void onComponentEvent(ComponentEvent ce) {
		super.onComponentEvent(ce);
		switch (ce.getEventTypeInt()) {
		case Event.ONCLICK:
			onClick(ce);
			break;
		case Event.ONMOUSEOVER:
			onMouseOver(ce);
			break;
		case Event.ONMOUSEOUT:
			onMouseOut(ce);
			break;
		case Event.ONFOCUS:
			// onFocus(ce);
			break;
		}
	}

	/**
	 * Sets the picker's maximum allowed date.
	 * 
	 * @param maxDate
	 *            the max date
	 */
	public void setMaxDate(Date maxDate) {
		if (maxDate != null) {
			maxDate = new DateWrapper(maxDate).resetTime().asDate();
		}
		this.maxDate = maxDate;
		if (rendered) {
			update(value);
		}
	}

	/**
	 * Sets the data picker messages.
	 * 
	 * @param messages
	 *            the date picker messages
	 */
	public void setMessages(DatePickerMessages messages) {
		this.messages = messages;
	}

	/**
	 * Sets the picker's minimum allowed date.
	 * 
	 * @param minDate
	 *            the minimum date
	 */
	public void setMinDate(Date minDate) {
		if (minDate != null) {
			minDate = new DateWrapper(minDate).resetTime().asDate();
		}
		this.minDate = minDate;
		if (rendered) {
			update(value);
		}
	}
	
	private void setStartDate(DateWrapper startDate){
		this.startDate = startDate;
	}
	
	public DateWrapper getStartDate(){
		return startDate;
	}
	
	private void setEndDate(DateWrapper endDate){
		this.endDate = endDate;
	}
	
	public DateWrapper getEndDate(){
		return endDate;
	}

	/**
	 * Sets the picker's start day
	 * 
	 * @param startDay
	 *            the start day
	 */
	public void setStartDay(int startDay) {
		this.startDay = startDay;
	}

	/**
	 * Sets the value of the date field.
	 * 
	 * @param date
	 *            the date
	 */
	public void setValue(Date date) {
		setValue(date, false);
	}

	/**
	 * Sets the value of the date field.
	 * 
	 * @param date
	 *            the date
	 * @param supressEvent
	 *            true to suppress the select event
	 */
	public void setValue(Date date, boolean supressEvent) {
		this.value = new DateWrapper(date).resetTime();
		if (rendered) {
			update(value);
		}
		if (!supressEvent) {
			DatePickerEvent de = new DatePickerEvent(this);
			de.setDate(date);
			fireEvent(Events.Select, de);
		}
	}

	@Override
	protected void doAttachChildren() {
		super.doAttachChildren();
		header.onAttach();
		ComponentHelper.doAttach(footer);
		ComponentHelper.doAttach(grid);
	}

	@Override
	protected void doDetachChildren() {
		super.doDetachChildren();
		header.onDetach();
		ComponentHelper.doDetach(footer);
		ComponentHelper.doDetach(grid);
		monthPicker.setVisible(false);
	}

	protected void onClick(ComponentEvent be) {
		be.preventDefault();
		El target = be.getTargetEl();
		El pn = null;
		String cls = target.getStyleName();
		if (cls.equals("x-date-left-a")) {
			showPrevMonth();
		} else if (cls.equals("x-date-right-a")) {
			showNextMonth();
		}
		if ((pn = target.findParent("td.x-date-mp-month", 2)) != null) {
			mpMonths.removeStyleName("x-date-mp-sel");
			El elem = target.findParent("td.x-date-mp-month", 2);
			elem.addStyleName("x-date-mp-sel");
			mpSelMonth = pn.dom.getPropertyInt("xmonth");
		} else if ((pn = target.findParent("td.x-date-mp-year", 2)) != null) {
			mpYears.removeStyleName("x-date-mp-sel");
			El elem = target.findParent("td.x-date-mp-year", 2);
			elem.addStyleName("x-date-mp-sel");
			mpSelYear = pn.dom.getPropertyInt("xyear");
		} else if (target.is("button.x-date-mp-ok")) {
			DateWrapper d = new DateWrapper(mpSelYear, mpSelMonth, 1);
			update(d);
			hideMonthPicker();
		} else if (target.is("button.x-date-mp-cancel")) {
			hideMonthPicker();
		} else if (target.is("a.x-date-mp-prev")) {
			updateMPYear(mpyear - 10);
		} else if (target.is("a.x-date-mp-next")) {
			updateMPYear(mpyear + 10);
		}

		if (GXT.isSafari) {
			focus();
		}
	}

	protected void onDayClick(ComponentEvent ce) {
		ce.preventDefault();
		El target = ce.getTargetEl();
		El e = target.findParent("a", 5);
		if (e != null) {
			String dt = e.dom.getPropertyString("dateValue");
			if (dt != null) {
				handleDateClick(e, dt);
				return;
			}
		}
	}

	protected void onFocus(ComponentEvent ce) {
		if (GXT.isFocusManagerEnabled()) {
			FocusFrame.get().frame(this);
		}
		update(activeDate);
	}

	protected void onKeyDown(ComponentEvent ce) {
		if (ce.isControlKey()) {
			showPreviousYear();
		} else {
			update(activeDate.addDays(7));
		}
	}

	protected void onKeyEnd(ComponentEvent ce) {
		if (ce.isShiftKey()) {
			setValue(new DateWrapper(activeDate.getFullYear(), 11, 31).asDate());
		} else {
			setValue(activeDate.getLastDateOfMonth().asDate());
		}
	}

	protected void onKeyEnter(ComponentEvent ce) {
		ce.stopEvent();
		setValue(activeDate.asDate());
	}

	protected void onKeyHome(ComponentEvent ce) {
		if (ce.isShiftKey()) {
			setValue(new DateWrapper(activeDate.getFullYear(), 0, 1).asDate());
		} else {
			setValue(activeDate.getFirstDayOfMonth().asDate());
		}
	}

	protected void onKeyLeft(ComponentEvent ce) {
		ce.stopEvent();
		if (ce.isControlKey()) {
			showPrevMonth();
		} else {
			update(activeDate.addDays(-1));
		}
	}

	protected void onKeyPageDown(ComponentEvent ce) {
		if (ce.isShiftKey()) {
			setValue(activeDate.addYears(1).asDate());
		} else {
			setValue(activeDate.addMonths(1).asDate());
		}
	}

	protected void onKeyPageUp(ComponentEvent ce) {
		if (ce.isShiftKey()) {
			setValue(activeDate.addYears(-1).asDate());
		} else {
			setValue(activeDate.addMonths(-1).asDate());
		}
	}

	protected void onKeyRight(ComponentEvent ce) {
		ce.stopEvent();
		if (ce.isControlKey()) {
			showNextMonth();
		} else {
			update(activeDate.addDays(1));
		}
	}

	protected void onKeyUp(ComponentEvent ce) {
		ce.stopEvent();
		if (ce.isControlKey()) {
			showNextYear();
		} else {
			update(activeDate.addDays(-7));
		}
	}

	public Grid getGrid() {
		return grid;
	}

	@Override
	protected void onRender(Element target, int index) {
		setElement(DOM.createDiv(), target, index);
		disableTextSelection(true);

		header = new Header();
		header.render(getElement());

		days = new Grid(1, 7);
		days.setStyleName("x-date-days"); // 这是设置星期头一，二...六，日的那个风格
		days.setCellPadding(0);
		days.setCellSpacing(0);
		days.setBorderWidth(0);

		String[] dn = constants.narrowWeekdays();
		String[] longdn = constants.weekdays();

		firstDOW = startDay != Integer.MIN_VALUE ? startDay : Integer
				.parseInt(constants.firstDayOfTheWeek()) - 1;

		days.setHTML(0, 0, "<span>" + dn[(0 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 1, "<span>" + dn[(1 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 2, "<span>" + dn[(2 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 3, "<span>" + dn[(3 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 4, "<span>" + dn[(4 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 5, "<span>" + dn[(5 + firstDOW) % 7] + "</span>");
		days.setHTML(0, 6, "<span>" + dn[(6 + firstDOW) % 7] + "</span>");

		days.getRowFormatter().getElement(0).setAttribute("role", "row");

		for (int i = 0; i < 7; i++) {
			days.getCellFormatter().getElement(0, i).setAttribute("role",
					"columnheader");
			days.getCellFormatter().getElement(0, i).setAttribute("aria-label",
					longdn[i]);
		}

		grid = new Grid(6, 7);
		grid.setStyleName("x-date-inner");
		grid.setCellSpacing(0);
		grid.setCellPadding(0);
		grid.addClickHandler(new ClickHandler() {

			public void onClick(ClickEvent event) {
				Event evt = DOM.eventGetCurrentEvent();
				ComponentEvent be = new ComponentEvent(Calendar.this, evt);
				onDayClick(be);
			}
		});
		String s = GXT.isAriaEnabled() ? "<a role=gridcell tabindex=0><span role=presentation></span></a>"
				: "<a href=#><span></span></a><br/>";
		for (int row = 0; row < 6; row++) {
			if (GXT.isAriaEnabled()) {
				grid.getRowFormatter().getElement(row).setAttribute("role",
						"row");
			}
			for (int col = 0; col < 7; col++) {
				grid.getCellFormatter().getElement(row, col).setAttribute(
						"valign", "top"); // 设置居顶
				grid.setHTML(row, col, s);
				grid.getCellFormatter()
						.setHeight(
								row,
								col,
								"71");
				if (GXT.isAriaEnabled()) {
					grid.getCellFormatter().getElement(row, col).setAttribute(
							"role", "presentation");
				}
			}
		}

		footer = new com.google.gwt.user.client.ui.HorizontalPanel();
		footer.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
		footer.setWidth("100%");

		todayBtn = new Button(messages.getTodayText(),
				new SelectionListener<ButtonEvent>() {
					public void componentSelected(ButtonEvent ce) {
						selectToday();
					}
				});
		if (messages.getTodayTip() != null) {
			todayBtn.setToolTip(messages.getTodayTip());
		}
		footer.add(todayBtn);
		todayBtn.getElement().getParentElement().setClassName("x-date-bottom");

		El pickerEl = new El(DOM.createDiv());
		pickerEl.dom.getStyle().setPropertyPx("left",
				target.getParentElement().getClientWidth() / 2 - 120); // 设置居中显示
		monthPicker = pickerEl;
		monthPicker.dom.setClassName("x-date-mp");

		gridWrapper = new El((Element) Document.get().createElement("DIV"));
		gridWrapper.dom.setAttribute("role", "grid");

		gridWrapper.appendChild(days.getElement());
		gridWrapper.appendChild(grid.getElement());

		getElement().appendChild(header.getElement());
		getElement().appendChild(gridWrapper.dom);
		getElement().appendChild(footer.getElement());
		getElement().appendChild(monthPicker.dom);

		El btntext = monthBtn.el().selectNode("button");
		btntext.setId(XDOM.getUniqueId());
		gridWrapper.dom.setAttribute("aria-labelledby", btntext.getId());

		// setWidth(177);
		setHeight(target.getClientHeight());

		cells = Util.toElementArray(el().select("table.x-date-inner tbody td"));
		textNodes = Util.toElementArray(el().select(
				"table.x-date-inner tbody span"));

		activeDate = value != null ? value : new DateWrapper();
		update(activeDate);

		if (GXT.isAriaEnabled()) {
			String[] tags = new String[] { "table", "tbody", "tr", "td" };
			for (int i = 0; i < tags.length; i++) {
				NodeList<Element> elems = el().select(tags[i]);
				for (int j = 0; j < elems.getLength(); j++) {
					if (elems.getItem(j).getAttribute("role").equals("")) {
						elems.getItem(j).setAttribute("role", "presentation");
					}
					if (i == 3) {
						elems.getItem(j).setId(XDOM.getUniqueId());
					}
				}
			}
		}

		el().makePositionable();
		el().setTabIndex(0);
		el().setElementAttribute("hideFocus", "true");
		sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.ONFOCUS);

		new KeyNav<ComponentEvent>(this) {

			@Override
			public void onDown(ComponentEvent ce) {
				onKeyDown(ce);
			}

			@Override
			public void onEnd(ComponentEvent ce) {
				onKeyEnd(ce);
			}

			@Override
			public void onEnter(ComponentEvent ce) {
				onKeyEnter(ce);
			}

			@Override
			public void onHome(ComponentEvent ce) {
				onKeyHome(ce);
			}

			@Override
			public void onKeyPress(ComponentEvent ce) {
				// space bar pressed
				if (ce.getKeyCode() == 32) {
					selectToday();
				}
			}

			@Override
			public void onLeft(ComponentEvent ce) {
				onKeyLeft(ce);
			}

			@Override
			public void onPageDown(ComponentEvent ce) {
				onKeyPageDown(ce);
			}

			@Override
			public void onPageUp(ComponentEvent ce) {
				onKeyPageUp(ce);
			}

			@Override
			public void onRight(ComponentEvent ce) {
				onKeyRight(ce);
			}

			@Override
			public void onUp(ComponentEvent ce) {
				onKeyUp(ce);
			}

		};
	}

	private void createMonthPicker() {
		StringBuffer buf = new StringBuffer();
		buf.append("<table border=0 cellspacing=0>");
		String[] monthNames = constants.shortMonths();
		for (int i = 0; i < 6; i++) {
			buf.append("<tr><td class=x-date-mp-month><a href=#>");
			buf.append(monthNames[i]);
			buf.append("</a></td>");
			buf.append("<td class='x-date-mp-month x-date-mp-sep'><a href=#>");
			buf.append(monthNames[i + 6]);
			buf.append("</a></td>");
			if (i == 0) {
				buf
						.append("<td class=x-date-mp-ybtn align=center><a class=x-date-mp-prev href=#></a></td><td class='x-date-mp-ybtn' align=center><a class='x-date-mp-next'></a></td></tr>");
			} else {
				buf
						.append("<td class='x-date-mp-year'><a href='#'></a></td><td class='x-date-mp-year'><a href='#'></a></td></tr>");
			}
		}
		buf
				.append("<tr class=x-date-mp-btns><td colspan='4'><button type='button' class='x-date-mp-ok'>");
		buf.append(messages.getOkText());
		buf.append("</button><button type=button class=x-date-mp-cancel>");
		buf.append(messages.getCancelText());
		buf.append("</button></td></tr></table>");

		monthPicker.update(buf.toString());

		mpMonths = new CompositeElement(Util.toElementArray(monthPicker
				.select("td.x-date-mp-month")));
		mpYears = new CompositeElement(Util.toElementArray(monthPicker
				.select("td.x-date-mp-year")));

		mpMonths.each(new CompositeFunction() {

			public void doFunction(Element elem, CompositeElement ce, int index) {
				index += 1;
				if (index % 2 == 0) {
					elem.setPropertyInt("xmonth", (int) (5 + (Math
							.round(index * .5))));
				} else {
					elem.setPropertyInt("xmonth", (int) (Math
							.round((index - 1) * .5)));
				}
			}

		});

	}

	private void handleDateClick(El target, String dt) {
		String[] tokens = dt.split(",");
		int year = Integer.parseInt(tokens[0]);
		int month = Integer.parseInt(tokens[1]);
		int day = Integer.parseInt(tokens[2]);
		Date d = new DateWrapper(year, month, day).asDate();
		if (d != null && !target.getParent().hasStyleName("x-date-disabled")) {
			setValue(d);
		}
	}

	private void hideMonthPicker() {
		monthPicker.slideOut(Direction.UP, new FxConfig(300,
				new Listener<FxEvent>() {
					public void handleEvent(FxEvent ce) {
						monthPicker.setVisible(false);
					}
				}));
	}

	private void onMouseOut(ComponentEvent ce) {
		El target = ce.getTarget("td.x-date-active", 3);
		if (target == null) {
			target = ce.getTarget("td.x-date-nextday", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-prevday", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-mp-month", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-mp-year", 3);
		}
		if (target != null) {
			target.removeStyleName("x-date-active-hover");
		}

	}

	private void onMouseOver(ComponentEvent ce) {
		El target = ce.getTarget("td.x-date-active", 3);
		if (target == null) {
			target = ce.getTarget("td.x-date-nextday", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-prevday", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-mp-month", 3);
		}
		if (target == null) {
			target = ce.getTarget("td.x-date-mp-year", 3);
		}
		if (target != null) {
			target.addStyleName("x-date-active-hover");
		}

	}

	private void selectToday() {
		setValue(new DateWrapper().asDate());
	}

	private void setCellStyle(Element cell, Date d, long sel, long min, long max) {
		long t = d.getTime();

		DateWrapper w = new DateWrapper(d);
		int year = w.getFullYear();
		int month = w.getMonth();
		int day = w.getDate();

		String dd = year + "," + month + "," + day;

		cell.getFirstChildElement().setPropertyString("dateValue", dd);

		if (t == today) {
			fly(cell).addStyleName("x-date-today");
			if (GXT.isAriaEnabled()) {
				cell.setAttribute("title", "Today");
			}
		}
		if (t == sel) {
			// fly(cell).addStyleName("x-date-selected"); //选择之后设置风格，这里不用
			if (GXT.isAriaEnabled()) {
				cell.getFirstChildElement().setAttribute("aria-selected",
						"true");
				if (isAttached()) {
					El.fly(cell.getFirstChildElement()).focus();
				}
			}
		} else {
			fly(cell).removeStyleName("x-date-selected");
			if (GXT.isAriaEnabled()) {
				cell.getFirstChildElement().setAttribute("aria-selected",
						"false");
			}
		}
		if (t > max || t < min) {
			fly(cell).addStyleName("x-date-disabled");
			cell.setTitle(messages.getMaxText());
		}
	}

	private void showMonthPicker() {
		createMonthPicker();

		Size s = el().getSize(true);
		s.height -= 2;
		monthPicker.setTop(1);
		// monthPicker.setSize(s.width, s.height);
		monthPicker.setSize(250, 150);
		// monthPicker.firstChild().setSize(s.width, s.height, true);
		monthPicker.firstChild().setSize(250, 150, true);

		mpSelMonth = (activeDate != null ? activeDate : value).getMonth();

		updateMPMonth(mpSelMonth);
		mpSelYear = (activeDate != null ? activeDate : value).getFullYear();
		updateMPYear(mpSelYear);

		monthPicker.enableDisplayMode("block");
		monthPicker.makePositionable(true);
		monthPicker.slideIn(Direction.DOWN, FxConfig.NONE);
	}

	private void showNextMonth() {
		update(activeDate.addMonths(+1));
	}

	private void showNextYear() {
		update(activeDate.addYears(1));
	}

	private void showPreviousYear() {
		update(activeDate.addYears(-1));
	}

	private void showPrevMonth() {
		update(activeDate.addMonths(-1));
	}

	protected void update(DateWrapper date) {
		gridMap = new HashMap<Date, Map<String, Integer>>();
		setStartDate(null);	//清空日期
		setEndDate(null);

		DateWrapper vd = activeDate;
		activeDate = date;
		if (vd != null && el() != null) {
			int days = date.getDaysInMonth();
			DateWrapper firstOfMonth = date.getFirstDayOfMonth();
			int startingPos = firstOfMonth.getDayInWeek() - firstDOW;

			if (startingPos <= startDay) {
				startingPos += 7;
			}

			// go to previous month.
			DateWrapper pm = activeDate.addMonths(-1);
			int prevStart = pm.getDaysInMonth() - startingPos;

			days += startingPos;

			DateWrapper d = new DateWrapper(pm.getFullYear(), pm.getMonth(),
					prevStart).resetTime();
			today = new DateWrapper().resetTime().getTime();
			long sel = value != null ? value.resetTime().getTime()
					: Long.MIN_VALUE;
			long min = minDate != null ? new DateWrapper(minDate).getTime()
					: Long.MIN_VALUE;
			long max = maxDate != null ? new DateWrapper(maxDate).getTime()
					: Long.MAX_VALUE;

			int i = 0;
			int z = 0;
			for (; i < startingPos; i++) {
				fly(textNodes[i]).update("" + ++prevStart);
				d = d.addDays(1);
				cells[i].setClassName("x-date-prevday");
				if (GXT.isAriaEnabled()) {
					cells[i].setAttribute("aria-disabled", "true");
				}
				setCellStyle(cells[i], d.asDate(), sel, min, max);

				// 设置日期
				if(getStartDate()==null)
					setStartDate(d);
				clear(i / 7, i); // 清空状态
				setGridMap(d, prevStart, i / 7, i); // 存储哪天对应哪行哪列
			}
			z = i;
			for (; i < days; i++) {
				int intDay = i - startingPos + 1;
				fly(textNodes[i]).update("" + intDay);
				d = d.addDays(1);
				cells[i].setClassName("x-date-active");
				setCellStyle(cells[i], d.asDate(), sel, min, max);

				// 设置日期
				if(getStartDate()==null)
					setStartDate(d);
				setEndDate(d);
				clear(i / 7, z); // 清空状态
				setGridMap(d, i - startingPos + 1, i / 7, z); // 存储哪天对应哪行哪列
				z = z + 1 > 6 ? 0 : ++z;
			}
			int extraDays = 0;
			for (; i < 42; i++) {
				fly(textNodes[i]).update("" + ++extraDays);
				d = d.addDays(1);
				cells[i].setClassName("x-date-nextday");
				if (GXT.isAriaEnabled()) {
					cells[i].setAttribute("aria-disabled", "true");
				}
				setCellStyle(cells[i], d.asDate(), sel, min, max);

				// 设置日期
				setEndDate(d);
				clear(i / 7, z); // 清空状态
				setGridMap(d, extraDays + 1, i / 7, z); // 存储哪天对应哪行哪列
				z = z + 1 > 6 ? 0 : ++z;
			}

			int month = activeDate.getMonth();

			String t = constants.standaloneMonths()[month] + " "
					+ activeDate.getFullYear();
			monthBtn.setText(t);
		}
	}

	/**
	 * 清空数据
	 */
	private void clear(Integer row, Integer cell) {
		Element element = getGrid().getCellFormatter().getElement(row, cell);
		if (element.getInnerHTML().indexOf("<div") > 0) {
			String html = element.getInnerHTML().substring(0,
					element.getInnerHTML().indexOf("<div"));
			element.setInnerHTML(html);
		}
	}

	/**
	 * 给哪一行哪一列中添数据
	 * 
	 * @param date
	 *            日期，格式为[yyyy-mm-dd]
	 * @param url
	 *            连接地址
	 * @param text
	 *            文本信息
	 */
	public void addWiget(Date date, String url, String text) {
		if (getGridMap().get(date) == null)
			return;

		Element element = getGrid().getCellFormatter().getElement(
				getGridMap().get(date).get(Calendar.ROW),
				getGridMap().get(date).get(Calendar.CELL));
		element.removeClassName("x-date-today");
		
		String href = "<div style=\"width:100px;height:20px;float:right;overflow: hidden; text-overflow:ellipsis;white-space: nowrap;\" onclick=\"javascript:self.location='"+url+"';\" title='"+text+"'><NOBR>" + text + "</NOBR></div>";

		String html = element.getInnerHTML();
		if (html.toLowerCase().indexOf("<a href=\"\"></a></div>") <= 0||html.toLowerCase().indexOf("</span></a><br>") >= 0) { // 如果没有创建空的
			// 创建空的
			html = "<div style=\"width:100%\"><a href=#><span>" + element.getInnerText()
					+ "</span></a></div><div style=\"height:51px;overflow-y: auto;\"><a href=\"\"></a></div>";
		}

		html = html.substring(0, html.toLowerCase().indexOf("<a href=\"\"></a></div>"))
				+ href + "<a href=\"\"></a></div>";
		element.setInnerHTML(html);
	}

	/**
	 * 存储哪天对应哪行哪列
	 * 
	 * @param d
	 *            日期
	 * @param day
	 *            天
	 * @param row
	 *            行
	 * @param cell
	 *            列
	 */
	private void setGridMap(DateWrapper d, Integer day, Integer row,
			Integer cell) {
		// 存储哪天对应哪行哪列
		Date key = new Date(d.getFullYear()-1900, d.getMonth() + 1, day); // 获得天，这里月它是从0开始算的，所以要+1
		Map<String, Integer> value = new HashMap<String, Integer>();
		value.put(ROW, row); // 存储行
		value.put(CELL, cell); // 存储列
		gridMap.put(key, value);
	}

	private void updateMPMonth(int month) {
		for (int i = 0; i < mpMonths.getCount(); i++) {
			Element elem = mpMonths.item(i);
			int xmonth = elem.getPropertyInt("xmonth");
			fly(elem).setStyleName("x-date-mp-sel", xmonth == month);
		}
	}

	private void updateMPYear(int year) {
		mpyear = year;
		for (int i = 1; i <= 10; i++) {
			El td = new El(mpYears.item(i - 1));
			int y2;
			if (i % 2 == 0) {
				y2 = (int) (year + (Math.round(i * .5)));
			} else {
				y2 = (int) (year - (5 - Math.round(i * .5)));
			}
			td.firstChild().update("" + y2);
			td.dom.setPropertyInt("xyear", y2);
			td.setStyleName("x-date-mp-sel", y2 == mpSelYear);
		}

	}

	class IconButton extends com.extjs.gxt.ui.client.widget.button.IconButton {
		public IconButton(String style,
				SelectionListener<IconButtonEvent> listener) {
			super(style, listener);
		}

		@Override
		protected void onAttach() {
			// TODO Auto-generated method stub
			super.onAttach();
		}

		@Override
		protected void onDetach() {
			super.onDetach();
		}
	}

	class DatePickerEvent extends ComponentEvent {
		private Calendar datePicker;
		private Date date;

		public DatePickerEvent(Calendar datePicker) {
			super(datePicker);
			this.datePicker = datePicker;
		}

		/**
		 * Returns the source date picker.
		 * 
		 * @return the date picker
		 */
		public Calendar getDatePicker() {
			return datePicker;
		}

		/**
		 * Returns the date.
		 * 
		 * @return the date
		 */
		public Date getDate() {
			return date;
		}

		/**
		 * Sets the date.
		 * 
		 * @param date
		 *            the date
		 */
		public void setDate(Date date) {
			this.date = date;
		}
	}
}


下面这是做的测试类，可根据下面例子自己添加，这里时间是到天，不能有小时分秒，因为只是往每天当前设置信息 
public class TestCalendar extends Calendar {

	@Override
	protected void onRender(Element target, int index) {
		super.onRender(target, index);
	}

	@Override
	protected void update(DateWrapper date) {
		super.update(date);

		mask(GXT.MESSAGES.loadMask_msg());
		addWiget(new Date("2011-01-01"),"http://www.163.com","标题");
		addWiget(new Date("2011-01-01"),"http://www.163.com","标题1");
		addWiget(new Date("2011-01-02"),"http://www.163.com","标题2");
	}
}
  • 大小: 165.6 KB
  • 大小: 164.6 KB
分享到：
评论
1 楼 kongquexue 2011-11-16  
那个行和列存储后grid每一次load出来都是修改后的！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Gxt_BLOG(GXt项目)

    1. **GXT组件库**：GXT包含了大量的UI组件，如按钮、表单、面板、菜单、对话框等，这些都是基于GWT的原生元素封装的。开发者可以通过这些组件快速构建界面，无需从零开始编写HTML和CSS代码。 2. **数据网格（Data ...

    GXT v2.2.1 API doc

    GXT v2.2.1 API文档是官方提供的详细参考资料，对于开发者来说是不可或缺的工具，它包含了所有GXT类的用法说明，有助于理解并有效利用GXT的功能。 1. **GXT组件和API** GXT提供了大量的组件，如表格（Grid）、树...

    GXT Cascade ComboBox Samples

    通过分析和理解这些示例代码，开发者可以学习如何在GXT环境中实现级联下拉框，从而在自己的项目中复用或改进这一功能。同时，这也涉及到数据管理、事件处理和UI设计等多个方面，对提升GWT和GXT的编程技能大有裨益。

    GXT 软件包和API

    GXT的API是其核心，包含了大量的类和接口，用于创建、配置和操作UI组件。例如： - `Widget`是所有GXT组件的基类，包括基本的布局容器和具体的功能组件。 - `Container`类代表容器组件，可以容纳其他组件，支持...

    GXT 学习的好书

    ### GXT学习的好书知识点详解 #### 一、GXT简介 GXT（GXT是Ext GWT的简称）是一款基于Google Web Toolkit (GWT) 的开源Java库，用于构建高性能的企业级富客户端应用程序。GXT 提供了丰富的UI组件集合、数据网格以及...

    GXT组件使用教程

    这意味着你可以定义一个简单的Java类，包含公共属性和getter/setter方法，然后GXT会自动将其转化为可交互的UI组件。这种方式极大地简化了数据绑定和更新过程，提高了开发效率。 2. **初识ExtGWT**： 在这个文档中...

    gxt初学进阶教程

    从给定的内容来看，这篇“gxt初学进阶教程”主要介绍了一个基于GWT（Google Web Toolkit）的扩展工具库ExtGWT，也被称作GXT，用于帮助Java程序员在Web开发中创建富客户端应用程序。以下是根据提供的文件内容总结出的...

    Gxt,包含resource

    标题中的"Gxt"指的是Sencha GXT，这是一个基于Google Web Toolkit (GWT) 的Java库，专门用于构建富互联网应用程序（Rich Internet Applications, RIA）。GXT提供了丰富的组件、数据绑定、布局管理以及主题定制等功能...

    一步一步教你新建GXT项目

    5. **创建第一个GXT视图**：在`src/main/java/com/yourcompany/yourproject/client`目录下，创建一个新的Java类，如`MyView.java`，继承`com.extjs.gxt.ui.client.widget.ContentPanel`或`...

    GXT的JAR包

    GXT库扩展了GWT的功能，提供了丰富的组件库，包括表格、树形视图、图表、数据网格、日历、菜单等，这些组件具有高度可定制性和丰富的交互效果。GXT还支持响应式布局，可以在不同设备上呈现出良好的用户体验。此外，...

    gxt-1.2.3.jar.zip

    标题 "gxt-1.2.3.jar.zip" 指的是一个包含GXT库的压缩文件，版本为1.2.3。GXT，全称为Google Web Toolkit EXT，是Google Web Toolkit（GWT）的一个扩展，它提供了一系列丰富的用户界面组件，用于构建功能强大的Web...

    gwt + gxt jar包

    GWT（Google Web Toolkit）和GXT（EXT GWT）是两个重要的Java开发框架，用于构建富互联网应用程序（RIA）。GWT是由Google开发的一个开源工具，它允许开发者使用Java语言来编写前端用户界面，然后自动将Java代码编译...

    gxt-api-2.2.5 doc

    《GXT API 2.2.5：深入理解与应用》 GXT，全称GWT Extensions，是一款基于Google Web Toolkit (GWT) 的开源UI组件库，它为Web应用程序提供了丰富的用户界面组件和功能。GXT API 2.2.5是这个库的一个版本，包含了...

    gwt gxt demo

    标题 "gwt gxt demo" 暗示我们正在探讨一个基于 Google Web Toolkit (GWT) 和 Sencha GXT 的演示项目。GWT 是一个由Google开发的开源框架，允许开发者使用Java语言来编写Web应用，然后编译成优化过的JavaScript代码...

    ext gwt gxt初学教程

    ### ExtGWT、GWT与GXT初学教程：打造企业级富客户端Web应用 #### 构建初识：ExtGWT与GWT的协同工作 ExtGWT，作为GWT（Google Web Toolkit）的有力补充，旨在为Java开发者提供更为丰富、功能全面的组件库，从而构建...

    gxt-2.2.5.zip

    《GXT 2.2.5：Ext-GWT的增强工具包详解》 GXT，全称为GWT eXtension，是由EXTJS团队开发的一个用于Google Web Toolkit（GWT）的扩展库，旨在为GWT开发者提供更丰富、更强大的用户界面组件和功能。GXT 2.2.5是该系列...

    american.gxt

    这是GTA4里的源文件american.gxt

    浪曦原创]GXT系列+第1讲+GXT_GWT的安装.

    浪曦原创]GXT系列+第1讲+GXT_GWT的安装.

    gxt、gwt与spring结合使用

    1. **依赖注入（DI）**：Spring可以通过DI将GXT或GWT的组件实例化并注入到其他类中，减少了代码中的硬编码，增强了灵活性和可扩展性。 2. **服务代理（Service Proxy）**：GWT的远程服务调用（RPC）机制可以与...

Magicbox
Global site tag (gtag.js) - Google Analytics