1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
    GeoffreyRen is on a distinguished road

      0  

    Exclamation About Ext.extend

    About Ext.extend


    I extended a gridpanel. The following was the code:
    Code:
     
    ///<reference path="../ext/vswd-ext_2.0.2.js" />
    Ext.ns('com.tsingdai.ux');
    /**
    * 信息内容模板.
    *
    * @class com.tsingdai.ux.Information
    */
    com.tsingdai.ux.Information = Ext.entend(Ext.grid.GridPanel, {
        enableColumnMove: false
        , stripeRows: true
        , frame: true
        , border: true
        , layout: "fit"
        , loadMask: true
        , initComponent: function () {
            debugger;
            //页面store
            this.store = this.createMainStore()[0];
            //工具栏和查询栏
            this.tbar = this.createBtnToolbar();
            //分页栏和过滤栏
            this.bbar = this.createBottomToolbar();
            //定义表格选择方式
            var sm = new Ext.grid.CheckboxSelectionModel();
            //创建表头
            this.cm = this.createCm();
            //双击修改事件
            this.on("rowdblclick", this.onrowdblclick, this);
            //button状态
            this.getSelectionModel().on('selectionchange', function (sm) {
                grid.delBtn.setDisabled(sm.getCount() < 1);
            });
            //call父类函数
            com.tsingdai.ux.Information.superclass.initComponent.call(this);
        }
        /*
        * 显示功能按钮和搜索条件
        */
        , createBtnToolbar: function () {
            var addCfg = {
                xtype: "tbbutton",
                minWidth: 80,
                ref: '../addBtn',
                text: "添加项",
                cls: "x-btn-text-icon",
                icon: "/Content/icons/add.png",
                handler: this.onAdd
            }
            var removeCfg = {
                xtype: "tbbutton",
                ref: '../delBtn',
                minWidth: 80,
                disabled: true,
                text: "删除项",
                cls: "x-btn-text-icon",
                icon: "/Content/icons/delete.png",
                handler: this.onRemove
            };
            var reportCfg = {
                xtype: "tbbutton",
                ref: '../ReportBtn',
                minWidth: 80,
                disabled: true,
                text: "上报",
                cls: "x-btn-text-icon",
                icon: "/Content/icons/arrow_up.png",
                handler: this.onReport
            }
            var adoptCfg = {
                xtype: "tbbutton",
                ref: '../AdoptBtn',
                minWidth: 80,
                disabled: true,
                text: "采用",
                cls: "x-btn-text-icon",
                icon: "/Content/icons/folder_bug.png",
                handler: this.onAdopt
            }
            var dbclickCfg = {
                xtype: "tbbutton",
                minWidth: 80,
                text: "双击修改项",
                cls: "x-btn-text-icon",
                icon: "/Content/icons/pencil.png",
                disabled: true
            }
            var tbar = [addCfg, removeCfg, reportCfg, adoptCfg, '->', dbclickCfg];
            tbar.on('render', this.onShowSearch, this);
        }
        , createSearchToolbar1: function () {
            var sbar1 = new Ext.Toolbar({
                items: [
                    '信息标题: ', {
                        xtype: 'textfield',
                        id: 'Title',
                        width: 150
                    }, ' ', '发布单位:', {
                        xtype: 'sicombo',
                        id: 'Infra_HospUser_Gird_TBar_Dept_Combobox',
                        store: this.createDepStore(),
                        width: 100,
                        mode: 'remote',
                        listWidth: 250,
                        tpl: new Ext.XTemplate(
               '<div class="x-grid3"><div><table>',
               '<thead class="x-grid3-header"><tr class="x-grid3-hd-row">',
               '<td class="x-grid3-hd x-grid3-cell x-grid3-hd-inner" style="width: 50px;color: blue;">编码</td>',
               '<td class="x-grid3-hd x-grid3-cell" style="width: 200px;color: blue;">部门名称</td>',
               '</tr></thead><tbody>',
               '<tpl for=".">',
               '<tr class="x-combo-list-item">',
               '<td class="x-grid3-col x-grid3-cell"><div class="x-grid3-cell-inner"  style="font-size:12px;">{Code}</div></td>',
               '<td class="x-grid3-col x-grid3-cell"><div class="x-grid3-cell-inner"  style="font-size:12px;">{Name}</div></td>',
               '</tr>', '</tpl>', '</tbody></table></div></div>')
                    }, ' ', '活动日期: ', {
                        id: 'RunTime',
                        xtype: 'datefield',
                        format: 'Y-m-d',
                        readOnly: true
                    }, '至', {
                        id: 'RunTimeTo',
                        xtype: 'datefield',
                        format: 'Y-m-d',
                        readOnly: true
                    }
                ]
            })
            return sb1;
        }
        , createSearchToolbar2: function () {
            var sbar2 = new Ext.Toolbar({
                items: [
                '主关键字: ', {
                    xtype: 'textfield',
                    id: 'keywords',
                    width: 150
                }, ' ', '信息状态:',
                    new Ext.form.ComboBox({
                        id: 'Report_Article_Gird_TBar_Status_Combobox',
                        store: status_store,
                        width: 100,
                        mode: 'remote',
                        listWidth: 250,
                        emptyText: '請選擇...',
                        displayField: 'Key',
                        valueField: 'Value',
                        triggerAction: 'all',
                        selectOnFocus: true
                    }), ' ', '创建日期: ', {
                        id: 'createTime',
                        xtype: 'datefield',
                        format: 'Y-m-d',
                        readOnly: true
                    }, '至', {
                        id: 'createTimeTo',
                        xtype: 'datefield',
                        format: 'Y-m-d',
                        readOnly: true
                    }, '  ', '-', {
                        text: '查询',
                        cls: "x-btn-text-icon",
                        icon: "/Content/icons/zoom.png",
                        handler: this.onSearch
                    }, "-", {
                        xtype: "tbbutton",
                        minWidth: 80,
                        text: "重置",
                        cls: "x-btn-text-icon",
                        icon: "/Content/icons/arrow_undo.png",
                        handler: this.onReset
                    }
                ]
            });
            return sb2;
        }
        , onShowSearch: function () {
            this.buildSearchToolbar1().render(this.tbar);
            this.buildSearchToolbar2().render(this.tbar);
        }
        /*
        * 显示底部分页和过滤
        */
        , createBottomToolbar: function () {
            return new Ext.PagingToolbar({
                displayInfo: true,
                emptyMsg: "没有数据显示",
                displayMsg: "显示从{0}条数据到{1}条数据,共{2}条数据",
                store: this.store,
                pageSize: ALL_PAGESIZE_SETTING,
                plugins: [this.createFilters()]
            });
        }
        /*
        * 过滤字段
        */
        , createFilters: function () {
            var filters = new Ext.ux.grid.GridFilters({
                encode: true,
                filters: [
                    { type: 'string', dataIndex: 'Title' },
                    { type: 'date', dataIndex: 'RunTime' },
                    { type: 'string', dataIndex: 'KeyWords' },
                    { type: 'string', dataIndex: 'PublisheDep' },
                    { type: 'date', dataIndex: 'CreateTime' }
                ]
            });
            return filters;
        }
        /*
        * GridPanel Store(主界面store)
        */
        , createMainStore: function () {
            var mainStore = new Ext.data.Store({
                url: "/ReportArticle/GetPlist",
                remoteSort: true,
                reader: new Ext.data.JsonReader({
                    root: 'data',
                    totalProperty: 'total',
                    id: 'Id'
                }
                , [
                    { name: 'Id', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'RunTime', type: 'date' },
                    { name: 'Author', type: 'string' },
                    { name: 'KeyWords', type: 'string' },
                    { name: 'PublisheDep', type: 'string' },
                    { name: 'Context', type: 'string' },
                    { name: 'CreateTime', type: 'date' }
                ])
            });
            // 添加删除事件
            mainStore.on('remove', this.onStoreRemove, this);
            // 设置默认排序
            mainStore.setDefaultSort('CreateTime', 'ASC');
            return [mainStore];
        }
        , onStoreRemove: function (thiz, record, index) {
            Ext.Ajax.request({
                url: '/ReportArticle/Delete',
                params: {
                    'Id': record.data.Id
                },
                success: function (response, opts) {
                    var result = Ext.util.JSON
                            .decode(response.responseText);
                    if (result.success == false) {
                        JsHelper.ShowError(result.msg);
                        this.store.insert(0, record);
                    }
                }
            });
        }
        /*
        * 信息状态store
        */
        , createStatusStore: function () {
            var status_store = new Ext.data.JsonStore({
                url: '/ReportArticle/GetState',
                id: 'Value',
                fields: ['Key', 'Value']
            });
            status_store.load({
                callback: function (r) {
                    filters.addFilter({
                        type: 'list',
                        dataIndex: 'State',
                        options: JsHelper.GetFilterListData(r, 'Value', 'Key')
                    })
                }
            });
        }
        /*
        * 部门Combo Store
        */
        , createDepStore: function () {
            var DeptStore = new Ext.data.JsonStore({
                url: '/ReportArticle/GetDeptList',
                root: 'data',
                totalProperty: 'total',
                id: 'Id',
                fields: [
                  { name: 'Id', type: 'string' },
                  { name: 'Name', type: 'string' },
                  { name: 'Code', type: 'string' }
                ]
            });
            return DeptStore;
        }
        /*
        * 创建表头
        */
        , createCm: function () {
            var headercm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), this.sm,
                { header: '信息标题', dataIndex: 'Title', sortable: true },
                { header: '信息状态', dataIndex: 'State', sortable: true,
                    renderer: function (v) {
                        return v == "" ? "" : (status_store.getById(v)).get("Key");
                    }
                },
                { xtype: 'datecolumn', header: '活动日期', format: 'Y年m月d日 H:i:s', dataIndex: 'RunTime', sortable: true },
                { header: '作者', dataIndex: 'Author', sortable: true },
                { header: '关键字', dataIndex: 'KeyWords', sortable: true },
                { header: '发布单位', dataIndex: 'PublisheDep', sortable: true },
                { xtype: 'datecolumn', header: '创建时间', format: 'Y年m月d日 H:i:s', dataIndex: 'CreateTime', sortable: true }
            ]);
            return headercm;
        }
        /*
        * 页面button事件
        */
        , onAdd: function (btn, e) {
        }
        , onRemove: function (btn, e) {
        }
        , onReport: function (btn, e) {
        }
        , onAdopt: function (btn, e) {
        }
        , onSearch: function (btn, e) {
        }
        , onReset: function (btn, e) {
        }
        , onrowdblclick: function (g, rowIndex, e) {
        }
        /*
        * 明细窗口
        */
        , showWindow: function (formReader, title, articleID) {
            var winCfg = {
                contextStore: this.store,
                formReader: formReader,
                articleID: articleID
            };
            win = new com.tsingdai.ux.DetailWindow(winCfg);
            win.show({ scope: this });
        }
    });
    Ext.reg('Information', com.tsingdai.ux.Information);
    But there meet a error info. The following was the error info(red part):

    Ext.entend is not a function
    Line 345

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,124
    Vote Rating
    514
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    Ext.entend
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Custom Events Implementation (Ext.extend/Ext.obserable)
    By anshubansal2000 in forum Ext 2.x: Help & Discussion
    Replies: 20
    Last Post: 17 Jun 2009, 7:44 AM
  2. Ext.ux.extend - extension of Ext.extend )
    By SamuraiJack1 in forum Ext 2.x: User Extensions and Plugins
    Replies: 5
    Last Post: 7 Oct 2008, 10:08 AM
  3. Extend Ext.Window error: Ext.Container.LAYOUT is not a constructor
    By michele.segata in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 15 Jul 2008, 12:03 AM
  4. Shouldn't Ext.form.BasicForm extend Ext.Component?
    By Animal in forum Community Discussion
    Replies: 4
    Last Post: 9 May 2007, 11:40 PM

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar