ExtJs4.1读取后台XML数据并显示在前台的Ext.grid.Panel，并额外添加一列动作列

来源：互联网发布：贷款意向客户数据资源编辑：程序博客网时间：2024/05/22 00:30

Ext.onReady(function () {

Ext.define("userInfo", {

extend: "Ext.data.Model",

fields: [

{ name: "UserName", type: "string" },

{ name: "Phone", type: "string" },

{ name: "Eamil", type: "string" },

{ name: "QQ", type: "string" },

{ name: "Addr", type: "string" },

{ name: "Department", type: "string" }

]

});

var store = Ext.create("Ext.data.Store", {

model: "userInfo",

storeId: "userInfoStore",

proxy: {

type: "ajax",

url: "test2.aspx",

reader: {

type: "xml",

record: "Table"

}

autoLoad: true,

sorters: ["UserName"]//以这个作为排序

});

Ext.create("Ext.grid.Panel", {

title: "UserInfo Show",

width: 700,

height: 400,

renderTo: Ext.getBody(),

store: Ext.data.StoreManager.lookup("userInfoStore"),

columns: [

{ text: "姓名", dataIndex: "UserName", width: 100, align: "center" },

{ text: "电话", dataIndex: "Phone", width: 100, align: "center" },

{ text: "邮箱", dataIndex: "Eamil", width: 100, align: "center" },

{ text: "QQ", dataIndex: "QQ", width: 100, align: "center" },

{ text: "地址", dataIndex: "Addr", width: 100, align: "center" },

{ text: "部门", dataIndex: "Department", width: 100, align: "center" },

{

xtype: "actioncolumn",

width: 100,

align: "center",

items: [

{ icon: "test/cog_edit.png", padding: 10, tooltip: "Edit", handler: function (grid, rowIndex, colIndex) {

var rec = grid.getStore().getAt(rowIndex);

alert("Edit " + rec.get("UserName"));

}

{ icon: "test/delete.png", padding: 10, tooltip: "Delete", handler: function (grid, rowIndex, colIndex) {

var rec = grid.getStore().getAt(rowIndex);

alert("Delete " + rec.get("UserName"));

}

}]

}

]

});