Extjs示例代码怎么使用？

Posted 2023-03-18

Ext.define('KitchenSink.view.grid.ProgressBarPager',
extend: 'Ext.grid.Panel',

requires: [
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.ProgressBarPager',
'KitchenSink.model.Company'
],
xtype: 'progress-bar-pager',
height: 320,
frame: true,
title: 'Progress Bar Pager',

initComponent: function()
this.width = 650;

var store = new Ext.data.Store(
model: KitchenSink.model.Company,
remoteSort: true,
pageSize: 10,
proxy:
type: 'memory',
enablePaging: true,
data: KitchenSink.data.DataSets.company,
reader:
type: 'array'


);

Ext.apply(this,
store: store,
columns: [
text: 'Company',
sortable: true,
dataIndex: 'name',
flex: 1
,
text: 'Price',
sortable: true,
formatter: 'usMoney',
dataIndex: 'price',
width: 75
,
text: 'Change',
sortable: true,
renderer: this.changeRenderer,
dataIndex: 'change',
width: 80
,
text: '% Change',
sortable: true,
renderer: this.pctChangeRenderer,
dataIndex: 'pctChange',
width: 100
,
text: 'Last Updated',
sortable: true,
dataIndex: 'lastChange',
width: 115,
formatter: 'date("m/d/Y")'
],
bbar:
xtype: 'pagingtoolbar',
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()

);
this.callParent();
,

afterRender: function()
this.callParent(arguments);
this.getStore().load();
,

changeRenderer: function(val)
if (val > 0)
return '<span style="color:green;">' + val + '</span>';
else if(val < 0)
return '<span style="color:red;">' + val + '</span>';

return val;
,

pctChangeRenderer: function(val)
if (val > 0)
return '<span style="color:green;">' + val + '%</span>';
else if(val < 0)
return '<span style="color:red;">' + val + '%</span>';

return val;

);

这个很简单，网站引用extjs 库，给元素相应的加上extjs的属性或者写js脚本加上方法就行了。
如果你不知道怎么引用，请多看ext js 的实例，官网有说明。 参考技术A vs 文件 打开 网站