ext.lingo.jsongrid.js

anewssystem新闻发布系统集成使用了spring hibernate freemarker EXTJS等开源框架 可以作为学习参考

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 *
 * http://www.extjs.com/license
 *
 * @author Lingo
 * @since 2007-09-19
 * http://code.google.com/p/anewssystem/
 */
/**
 * 声明Ext.lingo命名控件
 * TODO: 完全照抄，作用不明
 */
Ext.namespace("Ext.lingo");
/**
 * 拥有CRUD功能的表格.
 *
 * @param container 被渲染的html元素的id，<div id="lightgrid"></div>
 * @param config    需要的配置{}
 */
Ext.lingo.JsonGrid = function(container, config) {
    this.container = Ext.get(container);
    this.id        = container;
    this.config    = config;
    this.metaData  = config.metaData;
    this.genHeader = config.genHeader !== false;
    //this.useHistory = config.useHistory !== false;
    this.useHistory = false;
    this.pageSize   = config.pageSize ? config.pageSize : 15;
    this.dialogWidth  = config.dialogWidth;
    this.dialogHeight = config.dialogHeight;
    this.urlPagedQuery = config.urlPagedQuery ? config.urlPagedQuery : "pagedQuery.htm";
    this.urlLoadData   = config.urlLoadData   ? config.urlLoadData   : "loadData.htm";
    this.urlSave       = config.urlSave       ? config.urlSave       : "save.htm";
    this.urlRemove     = config.urlRemove     ? config.urlRemove     : "remove.htm";

    this.filterTxt = "";

    Ext.lingo.JsonGrid.superclass.constructor.call(this);
}

Ext.extend(Ext.lingo.JsonGrid, Ext.util.Observable, {
    // 初始化
    init : function() {
        // 根据this.headers生成columnModel
        if (!this.columnModel) {
            this.initColumnModel();
        }

        // 生成data record
        if (!this.dataRecord) {
            var recordHeaders = new Array();
            for (var i = 0; i < this.metaData.length; i++) {
                var meta = this.metaData[i];
                var item = {};
                item.name       = meta.id;
                item.type       = "string";
                if (meta.mapping) {
                    item.mapping = meta.mapping;
                }
                item.defaultValue = "";
                //item.dateFormat = "yyyy-MM-dd";
                recordHeaders[recordHeaders.length] = item;
            }
            this.dataRecord = Ext.data.Record.create(recordHeaders);
        }

        // 生成data store
        if (!this.dataStore) {
            this.dataStore = new Ext.lingo.Store({
                proxy  : new Ext.data.HttpProxy({url:this.urlPagedQuery}),
                reader : new Ext.data.JsonReader({
                    root          : "result",
                    totalProperty : "totalCount",
                    id            : "id"
                }, recordHeaders),
                remoteSort : true
            });
            // this.dataStore.setDefaultSort("enterDate", "ASC");
        }

        // 生成表格
        if (!this.grid) {
            this.grid = new Ext.lingo.CheckRowSelectionGrid(this.id, {
                ds   : this.dataStore
                , cm : this.columnModel
                // selModel: new Ext.grid.CellSelectionModel(),
                // selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
                , selModel      : new Ext.lingo.CheckRowSelectionModel({useHistory:this.useHistory})
                , enableColLock : false
                , loadMask      : true
            });
            this.grid.on('rowdblclick', this.edit, this);
        }

        //右键菜单
        this.grid.addListener('rowcontextmenu', this.contextmenu, this);
    }

    // 初始化ColumnModel
    , initColumnModel : function() {
        var columnHeaders = new Array();
        for (var i = 0; i < this.metaData.length; i++) {
            var meta = this.metaData[i];
            if (meta.showInGrid === false) {
                continue;
            }
            var item = {};
            item.header    = meta.qtip;
            item.sortable  = true;
            item.dataIndex = meta.id;
            item.mapping   = meta.mapping;
            item.width     = meta.w ? meta.w : 110;
            item.defaultValue = "";
            // item.hidden = false;
            if (meta.renderer) {
                item.renderer = meta.renderer;
            }
            columnHeaders[columnHeaders.length] = item;
        }
        this.columnModel = new Ext.grid.ColumnModel(columnHeaders);
        this.columnModel.defaultSortable = false;
    }

    // 渲染
    , postRender : function() {
        // 生成头部工具栏
        if (this.genHeader) {
            var gridHeader = this.grid.getView().getHeaderPanel(true);
            this.toolbar = new Ext.Toolbar(gridHeader);
            var checkItems = new Array();
            for (var i = 0; i < this.metaData.length; i++) {
                var meta = this.metaData[i];
                if (meta.showInGrid === false) {
                    continue;
                }
                var item = new Ext.menu.CheckItem({
                    text         : meta.qtip,
                    value        : meta.id,
                    checked      : true,
                    group        : "filter",
                    checkHandler : this.onItemCheck.createDelegate(this)
                });
                checkItems[checkItems.length] = item;
            }

            this.filterButton = new Ext.Toolbar.MenuButton({
                icon     : "../widgets/lingo/list-items.gif",
                cls      : "x-btn-text-icon",
                text     : "请选择",
                tooltip  : "选择搜索的字段",
                menu     : checkItems,
                minWidth : 105
            });
            this.toolbar.add({
                icon     : "../widgets/lingo/list-items.gif",
                id      : 'add',
                text    : '新增',
                cls     : 'add',
                tooltip : '新增',
                handler : this.add.createDelegate(this)
            }, {
                icon     : "../widgets/lingo/list-items.gif",
                id      : 'edit',
                text    : '修改',
                cls     : 'edit',
                tooltip : '修改',
                handler : this.edit.createDelegate(this)
            }, {
                icon     : "../widgets/lingo/list-items.gif",
                id      : 'del',
                text    : '删除',
                cls     : 'del',
                tooltip : '删除',
                handler : this.del.createDelegate(this)
            }, '->', this.filterButton);

            // 输入框
            this.filter = Ext.get(this.toolbar.addDom({
                 tag   : 'input',
                 type  : 'text',
                 size  : '20',
                 value : '',
                 style : 'background: #F0F0F9;'
            }).el);

            this.filter.on('keypress', function(e) {
                if(e.getKey() == e.ENTER && this.filter.getValue().length > 0) {
                    this.dataStore.reload();
                }
            }.createDelegate(this));

            this.filter.on('keyup', function(e) {
                if(e.getKey() == e.BACKSPACE && this.filter.getValue().length === 0) {
                    this.dataStore.reload();
                }
            }.createDelegate(this));

            // 设置baseParams
            this.setBaseParams();
        }

        // 页脚
        var gridFooter = this.grid.getView().getFooterPanel(true);

        // 把分页工具条，放在页脚
        var paging = new Ext.PagingToolbar(gridFooter, this.dataStore, {
            pageSize         : this.pageSize
            , displayInfo    : true
            , displayMsg     : '显示: {0} - {1} 共 {2} 条记录'
            , emptyMsg       : "没有找到相关数据"
            , beforePageText : "第"
            , afterPageText  : "页，共{0}页"
        });

        var pageSizePlugin = new Ext.ux.PageSizePlugin();
        pageSizePlugin.init(paging);

        this.dataStore.load({
            params:{start:0, limit:paging.pageSize}
        });
    }

    // 设置baseParams
    , setBaseParams : function() {
        // 读取数据
        this.dataStore.on('beforeload', function() {
            this.dataStore.baseParams = {
                filterValue : this.filter.getValue(),
                filterTxt   : this.filterTxt
            };
        }.createDelegate(this));
    }

    // 进行渲染
    , render : function() {