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,785
    Vote Rating
    597
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."