扩展Ext.grid.GridPanel

浪潮之巅

于 2011-05-19 09:48:00 发布

883

分类专栏： ExtJs 文章标签：扩展 function iframe null border tabs

本文链接：https://blog.csdn.net/jinwenming/article/details/6431278

版权

ExtJs 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

www.wuanju.com 就是用的此Extjs扩展：

Ext.namespace("Ext.ux.grid");

/**

* grid

* @class Ext.ux.grid.grid.KingGridPanel

* @extends Ext.grid.GridPanel

* @author king

Ext.ux.grid.KingGridPanel = Ext.extend(Ext.grid.GridPanel, {

actions: null,

title: null,

addConfig: null, //添加按钮配置

editConfig: null, //编辑按钮配置

deleteConfig: null, //删除按钮配置

hasPaging: true, //是否分页工具栏

dataUrl: null, //数据网址

dataConfig: null, //GridPanel基本配置

pageSize: 25, //分页大小

searchFieldName: null, //搜索关键字段名称，如果为空则不显示搜索框

loadMask: {

msg: '正在加载数据，请稍侯. . . . . .'

autoHeight: true,

viewConfig: {

forceFit: true

frame: true,

border: true,

header: false,

initComponent: function () {

this.initConfig();

var self = this;

var toolbar = new Ext.Toolbar({});

if (this.addConfig.length > 0) {

var btn = new Ext.Button({

id: 'btnAdd',

text: '添加' + this.title,

tooltip: '添加' + this.title,

iconCls: 'add',

handler: this.doAdd.createDelegate(this)

});

toolbar.add(btn, '-');

}

if (this.editConfig.length > 0) {

var btn = new Ext.Button({

id: 'btnEdit',

text: '编辑' + this.title,

tooltip: '编辑' + this.title,

iconCls: 'edit',

handler: this.doEdit.createDelegate(this)

});

toolbar.add(btn, '-');

}

if (this.deleteConfig.length > 0) {

var btn = new Ext.Button({

id: 'btnDelete',

text: '删除' + this.title,

tooltip: '删除' + this.title,

iconCls: 'delete',

handler: this.doDelete.createDelegate(this)

});

toolbar.add(btn, '-');

}

//显示顶部工具栏

if (this.actions != null && this.actions.length > 0) {

for (var i = 0; i < this.actions.length; i++) {

var action = this.actions[i];

var btn = new Ext.Button({

id: "btn" + i,

text: action.text,

tooltip: action.tooltip,

iconCls: action.iconCls,

handler: function () {

self.doActionToGrid(action.url);

}

});

btn.disabledIfLessThan = action.disabledIfLessThan;

toolbar.add(btn, "-");

}

//根据搜索关键词判断是否显示搜索工具条

if (this.searchFieldName != null && this.searchFieldName.length > 0) {

var Searchbutton = ([

new Ext.form.Label({

html: '搜索： '

}),

new Ext.app.SearchField({

store: this.store,

width: 320,

paramFieldName: this.searchFieldName,

emptyText: '按关键词搜索...'

})

]);

toolbar.add(Searchbutton);

}

this.tbar = toolbar;

//是否显示分页

if (this.hasPaging) {

this.bbar = new Ext.PagingToolbar({

displayInfo: true,

emptyMsg: "没有数据显示",

displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',

store: this.store,

pageSize: this.pageSize

});

};

Ext.ux.grid.KingGridPanel.superclass.initComponent.call(this);

//双击事件

this.on('rowdblclick', function (f, e) {

self.doEdit();

}, this);

this.on("rowcontextmenu", function (grid, rowIndex, e) {

e.preventDefault();

if (rowIndex < 0) { return; }

var treeMenu = new Ext.menu.Menu([

{ text: "添加" + this.title, iconCls: 'add', pressed: true, handler: this.doAdd.createDelegate(this) },

{ text: "编辑" + this.title, iconCls: 'edit', pressed: true, handler: this.doEdit.createDelegate(this) },

{ text: "删除" + this.title, iconCls: 'delete', pressed: true, handler: this.doDelete.createDelegate(this) }

]);

treeMenu.showAt(e.getPoint());

});

}

, initConfig: function () {

var gRecord = new Array();

var columns = '';

for (var i = 0; i < this.dataConfig.length; i++) {

var g = this.dataConfig;

if (columns.length > 0) {

columns += ',';

}

if (g[i].type == "datetime") {

columns += '{header:"' + g[i].header + '",dataIndex:"' + g[i].dataIndex + '",width:100,sortable:' + g[i].sortable + ',hidden:' + g[i].hidden + ',renderer: this.renderDate}';

} else {

columns += '{header:"' + g[i].header + '",dataIndex:"' + g[i].dataIndex + '",width:100,sortable:' + g[i].sortable + ',hidden:' + g[i].hidden + '}';

}

gRecord[gRecord.length] = {

}

this.cm = new Ext.grid.ColumnModel(eval('([' + columns + '])'));

var reader = new Ext.data.JsonReader({

totalProperty: "totalCount",

root: "data"

}, Ext.data.Record.create(gRecord));

var newStore = new Ext.data.Store({

baseParams: { MaxRowsPerPage: this.pageSize },

proxy: new Ext.data.HttpProxy({ url: this.dataUrl }),

reader: reader

});

newStore.load({

params: { CurrentPage: 1, MaxRowsPerPage: this.pageSize }

});

this.store = newStore;

}

, onRender: function () {

Ext.ux.grid.KingGridPanel.superclass.onRender.apply(this, arguments);

}

, doActionToGrid: function (action_url) {

alert(action_url);

// var c = this.getSelectionModel().getCount();

// var self = this;

// if (c > 0)

// Ext.MessageBox.confirm('prompt', 'Are you sure?', function (btn, text) {

// if (btn == 'yes') {

// //self.doActualActionToGrid(action_url);

// }

// });

// else

// Ext.MessageBox.alert('prompt', 'No selection!');

}

, doAdd: function () {

//this.addConfig是一个二维数组格式：[链接，窗口宽，窗口高,]

var tabs = new Ext.Panel({

region: 'center',

margins: '0 0 0 0',

border: false,

defaults: { autoScroll: true },

items: [{

html: '<iframe id="iframe" name="iframe" src="' + this.addConfig[0] + '" width="100%" height="' + this.addConfig[2] + '" frameborder="0" scrolling="no"></iframe>'

}]

});

var win = new Ext.Window({

title: '新增' + this.title,

closable: true,

resizable: false, //用户是否可以调整窗体大小，默认值为true表示可以调整大小。

width: this.addConfig[1],

height: this.addConfig[2] + 36,

modal: true,

plain: true,

items: [tabs]

});

win.show(this);

}

, doEdit: function () {

//this.editConfig是一个二维数组格式：[链接，窗口宽，窗口高,]

var row = this.getSelectionModel().getSelections();

if (row.length == 1) {

var fieldName = this.getColumnModel().getDataIndex(0);

var id = row[0].get(fieldName);

var tabs = new Ext.Panel({

region: 'center',

margins: '0 0 0 0',

border: false,

defaults: { autoScroll: true },

items: [{

html: '<iframe id="iframe" name="iframe" src="' + this.editConfig[0] + '?id=' + id + '" width="100%" height="' + this.editConfig[2] + '" frameborder="0" scrolling="no"></iframe>'

}]

});

var win = new Ext.Window({

title: '编辑' + this.title,

closable: true,

resizable: false, //用户是否可以调整窗体大小，默认值为true表示可以调整大小。

width: this.editConfig[1],

height: this.editConfig[2] + 36,

modal: true,

plain: true,

items: [tabs]

});