Results 1 to 2 of 2

Thread: About Ext.extend

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    4
    Vote Rating
    0
      0  

    Exclamation 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
    18,384
    Vote Rating
    858
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •