/********************************************
 * @author  henyue@gmail.com (Kong)
 * @version CreatedTime:2010-4-27 下午16:11:12
 * @Description ExtJs入门练习：GridPanel
 ********************************************/

// 勾选模型
var sm = new Ext.grid.CheckboxSelectionModel({
  singleSelect: false
//singleSelect设置为true，则应用到grid之后只能单选，默认为false
});

// 列模型
var cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),// Ext封装的特殊类，用于显示行号
  sm,
  {
    id : "title",
    header : "标题",
    width : 150,
    dataIndex : "title",
    tooltip : "文章标题",
    renderer : function(v) {
      return "<u>" + v + "</u>";// renderer方法，可组合jsonObj内多个属性一次返回
    }
  }, {
    header : "作者",
    width : 50,
    dataIndex : "author"
  }, {
    header : "创建时间",
    width : 150,
    format : "Y-m-d",
    dataIndex : "createdTime",
    renderer : Ext.util.Format.dateRenderer("Y-m-d")
  }, {
    header : "操作",
    width : 100,
    dataIndex : "rowId",
    menuDisabled : true,
    renderer : function(v) {
      var modify = "<a href='modify?newsId=" + v + "'>修改</a>";
      var remove = "<a href='delete?newsId=" + v + "'>删除</a>";
      return "<span align='center'>" + modify + "&nbsp;" + remove
      + "</span>";
    }
  }]);

// Dummy数据
var data = [{
  rowId : 5,
  title : "论雷峰塔的倒掉",
  author : "鲁迅",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 2,
  title : "背影",
  author : "朱自清",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 3,
  title : "鲁提辖拳打镇关西",
  author : "施耐庵",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 1,
  title : "沁园春 雪",
  author : "毛 泽 东",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 4,
  title : "蜀道难",
  author : "李白",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}];

// 代理，使用Dummy数据
var proxy = new Ext.data.MemoryProxy(data);

// Record 定义记录结果
var News = Ext.data.Record.create([{
  name : "title",
  type : "string",
  mapping : "title"
},
// 每个元素的name属性必须与data里的属性字段相同，包括大小写，否则读不出数据且不会报错
{
  name : "author",
  type : "string",
  mapping : "author"
}, {
  name : "createdTime",
  type : "string",
  mapping : "createdTime"
}, {
  name : "rowId",
  mapping : "rowId"
}]);

// Reader
var reader = new Ext.data.JsonReader({}, News);

// Store
var store = new Ext.data.Store({
  proxy : proxy,
  reader : reader
});
store.load();

Ext.onReady(function() {

  var grid = new Ext.grid.GridPanel({
    title : "新闻列表",
    width : 500,
    autoHeight : true,
    cm : cm,
    sm : sm,
    //如果只在ColumnModel中加sm而不在grid构造中加，有以下后果：
    //1.不能实现多选；
    //2.不能实现标题行的CheckBox被选中时全选
    store : store,
    renderTo : "a",
    autoExpandColumn : "title",
    tbar : [{
      text : "删除选定行",
      icon : "ext/resources/images/default/dd/drop-no.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        var rsm = grid.getSelectionModel();
        var view = grid.getView();
        var store = grid.getStore();
        for (var i = view.getRows().length - 1; i >= 0; i--) {
          if (rsm.isSelected(i)) {
            store.remove(store.getAt(i));
          }
        }
        view.refresh();
      }
    }, {
      text : "删除所有行",
      icon : "ext/resources/images/default/dd/drop-no.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        Ext.Msg.confirm("警告", "确定要删除所有数据么？", function (btn) {
          if (btn == "yes") {
            var store = grid.getStore();
            store.removeAll();
            grid.getView().refresh();
          }
        })
      }
    }, '-', { //'-'为间隔标志符号|
      text : "新建内容",
      icon : "ext/resources/images/default/dd/drop-add.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        Ext.Msg.prompt("新建", "标题：", function (btn, txt) {
          var newItem = {
            title : txt,
            au