extjs GridPanel

function showUrl(url)
        {
            return "<a href='" + url + "'>"+ url +"</a>";
        }
        Ext.onReady(function(){
            var data = [[1,"easyJF","www.easyjf.com"],[2,"unix","www.chinaunix.com"],[3,"extjs","www.extjs.com"]];
            var store = new Ext.data.SimpleStore({data:data,fields:["id","name","url"]});
            var cm = new Ext.grid.ColumnModel([{header:"名称",dataIndex:"name",sortable:true},{header:"网址",dataIndex:"url",sortable:true,renderer :showUrl }]);
            //--
            var grid = new Ext.grid.GridPanel({
                title:"数据显示",
                height:150,
                width:600,
                store:store,
                //--
                /*
                columns:[
                    {header:"名称",dataIndex:"name",sortable:true},
                    {header:"网址",dataIndex:"url",sortable:true}
                ]*/
                cm:cm
                //--
               
            });
            //--
            grid.render("grid");
        });

自定义的渲染函数可以显示各种自己需要的格式，是浏览器能处理的html都可以。

 

json数据格式

function showUrl(url)
        {
            return "<a href='" + url + "'>"+ url +"</a>";
        }
        Ext.onReady(function(){
            //var data = [[1,"easyJF","www.easyjf.com"],[2,"unix","www.chinaunix.com"],[3,"extjs","www.extjs.com"]];
            //var store = new Ext.data.SimpleStore({data:data,fields:["id","name","url"]});
            var jsondata = [{id:1,name:"easyJF",url:"www.easyjf.com"},{id:2,name:"unix",url:"www.chinaunix.com"}];
            var jsonstore = new Ext.data.JsonStore({data:jsondata,fields:["id","name","url"]});
            var cm = new Ext.grid.ColumnModel([{header:"名称",dataIndex:"name",sortable:true},{header:"网址",dataIndex:"url",sortable:true,renderer:showUrl}]);
            //--
            var grid = new Ext.grid.GridPanel({
                title:"数据显示",
                height:150,
                width:600,
                store:jsonstore,
                //--
                /*
                columns:[
                    {header:"名称",dataIndex:"name",sortable:true},
                    {header:"网址",dataIndex:"url",sortable:true}
                ]*/
                cm:cm
                //--
               
            });
            //--
            grid.render("grid");
        });

 

Ext.data.XmlReader读取xml数据

Ext.onReady(function(){
            var xmlreader = new Ext.data.XmlReader({record:"row"},["id","name","url"]);
            var xmldata = new Ext.data.Store({url:"mydata.xml",reader:xmlreader,});
            var colm = new Ext.grid.ColumnModel([{header:"名称",dataIndex:"name"},{header:"网址",dataIndex:"url"}]);
            var grid = new Ext.grid.GridPanel({height:200,width:600,cm:colm,store:xmldata});
            grid.render("grid");
            xmldata.load();
        });

 

mydata.xml

<?xml version="1.0" encoding="GBK"?>
<data>
    <row>
        <id>1</id>
        <name>easyjf</name>
        <url>www.easyjf.com</url>
    </row>
    <row>
        <id>2</id>
        <name>job</name>
        <url>www.zh-rn.com</url>
    </row>
</data>

 

EditorGridPanel并且产生afteredit事件

    Ext.onReady(function(){
            var data = [{id:1,name:"子君1",sex:"男",birthdate:"1987-05-23"},{id:2,name:"子君2",sex:"男",birthdate:"1987-05-24"}];
            var jsondata = new Ext.data.JsonStore({data:data,fields:["id","name","sex","birthdate"]});;
            var colm = new Ext.grid.ColumnModel([
                {header:"ID",dataIndex:"id"},
                {header:"姓名",dataIndex:"name",editor:new Ext.form.TextField()},
                {header:"性别",dataIndex:"sex"},
                {header:"出生日期",dataIndex:"birthdate",renderer:Ext.util.Format.dateRenderer("Y年m月d日"),
                    editor:new Ext.form.DateField({format:"Y年m月d日"})
                }]);
            var egrid = new Ext.grid.EditorGridPanel({title:"可编辑GridPanel",height:200,width:500,
                store:jsondata,cm:colm,clicksToEdit:1
            });
            egrid.render("egrid");
            egrid.on("afteredit",afterEdit);
        });
        function afterEdit(obj)
        {
            var record = obj.record;
            var id = record.get("id");
            var name = record.get("name");
            var sex = record.get("sex");
            var birthdate = record.get("birthdate");
            alert(id + ","+name+","+sex+","+birthdate);
        }