Ext学习日记 grid使用

写了简单的几个关于grid的使用，记录一下学习成果吧。 synopsis：in this demo ,have tow grid panle, in the first one ,there are six functions :add a new row ,delete the selected row,get the spcified row data ,get the selected row data, the event for get the value when the row is selected,and renderer a customer function to a column

 Ext.onReady(function(){   var Plant = Ext.data.Record.create([        {name: 'name',mapping:'name', type: 'string'},        {name: 'occupation', type: 'string'}   ]); var reader = new Ext.data.XmlReader({  record: 'row',        id: 'id',        totalRecords: 'results' },Plant);     // create the Data Store    var store = new Ext.data.Store({        url: 'data.xml',        reader: reader,        remoteSort: true    });    var store1 = new Ext.data.Store({        url: 'data.xml',        reader: reader,        remoteSort: true    });    var sm = new Ext.grid.CheckboxSelectionModel({                 singleSelect: true,                 listeners: {                     rowselect: function(sm, row, rec) {                        alert("sm"+sm+"rowindex="+row+"name="+rec.get("name")+"occupation="+rec.get("occupation"));                     }                 }             });    function setUl(value)    {      return '<a style="color:red;">'+ value + '</a>';    };    var cm = new Ext.grid.ColumnModel([      sm,     {header: "name", width: 120, dataIndex: 'name', sortable: true},     {header: "occupation", width: 180, dataIndex: 'occupation', sortable: true,renderer :setUl}    ]);    /    //grid GridPanel    ///    // create the grid    var grid = new Ext.grid.GridPanel({     id:'grid',        store: store,        cm:cm,        sm: sm,        renderTo:'grid-example',        width:540,        height:200,        title:'addnewrow',        tbar :[{         text: 'Add Row',         handler : function(){          var  p = new Plant({           name:'newname',           occupation:'newoccupation'          });          grid.stopEditing();          store.insert(0, p);          grid.startEditing(0, 0)         }},         {          text:'getValue',          handler:function(){           //get one row's record then get the colum's value           var gs = grid.getStore();           var r = gs.getAt(1);           var v1 = r.get('name');           alert(v1);          }         },         {          text:'getSelectedRowValue',          handler:function(){           //get the selected row's value           var cs = grid.getSelectionModel();           var ifs = cs.hasSelection();           if(ifs)           {            var cr = cs.getSelected();            var v1 = cr.get('name');            alert(v1);           };          }         },         {          text:'deleteSelectedRow',          handler:function(){           //get the selected row's value           var cs = grid.getSelectionModel();           var ifs = cs.hasSelection();           if(ifs)           {            var cr = cs.getSelected();            store.remove(cr);           };          }         }        ],         bbar: new Ext.PagingToolbar({            pageSize: 3,            store: store,            displayInfo: true,            displayMsg: 'Displaying topics {0} - {1} of {2}',            emptyMsg: "No topics to display"        })    });    grid.render();    store.load();    /    //grid1 EditorGridPanel    ///    var cme = new Ext.grid.ColumnModel([      sm,     {header: "name", width: 120, dataIndex: 'name', sortable: true,editor: new Ext.form.TextField({               allowBlank: false           })},     {header: "occupation", width: 180, dataIndex: 'occupation', sortable: true,editor: new Ext.form.TextField({         allowBlank: false     })}    ]);    var grid1 = new Ext.grid.EditorGridPanel({        store: store1,        cm:cme,        renderTo:'grid-example',        width:540,        height:200,        title:'addneweditorrow',        tbar :[{         text: 'Add Edit Row',         handler : function(){          var  p = new Plant({           name:'newname',           occupation:'newoccupation'          });          grid1.stopEditing();          store1.insert(0, p);          grid1.startEditing(0, 0);         }        }],         bbar: new Ext.PagingToolbar({            pageSize: 3,            store: store1,            displayInfo: true,            displayMsg: 'Displaying topics {0} - {1} of {2}',            emptyMsg: "No topics to display"        })    });    grid1.render();    store1.load();});