PDA

View Full Version : About Ext.extend



GeoffreyRen
20 Jun 2010, 3:33 PM
I extended a gridpanel. The following was the 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

evant
20 Jun 2010, 4:10 PM
Ext.entend