Extjs4 在Grid列中加入progress bar

今天处理Grid中显示百分比，模块中多个列表都含义百分比的列，后来想把进度条整到列表中，替换列中的百分比数字，应该会更直观，今天也处理好了这个progress bar，回来再做个例子记录下来，例子还是用之前的《 Extjs4:给Grid的Column加上提示》，在data中多加一列数据progress,和其他的数据没有什么关联，只是测试用，列表中显示为进度，并体现在列中的进度条，在Model中也需要加上一个字段，还是先看下效果:

　　列表中加入进度条，鼠标移到进度列，提示进度的百分比。
Sencha.model.Company

Ext.define('Sencha.model.Company', {
    extend: 'Ext.data.Model',

    idProperty: 'company',

    fields: [
        {
            name: 'company'
        },
        {
            name: 'price',
            type: 'float'
        },{
            name: 'progress',
            type: 'int'
        },
        {
            name: 'change',
            type: 'float'
        },
        {
            name: 'pctChange',
            type: 'float'
        },
        {
            dateFormat: 'n/j h:ia',
            name: 'lastChange',
            type: 'date'
        }
    ]
});

列表中进度列code:

{
                    xtype: 'gridcolumn',
                    width: 110,
                    dataIndex: 'progress',
                    text: '进度',                 
                    renderer: function (value, metaData, record) {                     
                    	var id = Ext.id(); 
                    	metaData.tdAttr = 'data-qtip="'+value+'%"';
                    	Ext.defer(function () {                         
                    		Ext.widget('progressbar', {
                    			renderTo: id,
                    			value: value / 100, 
                    			height:20,
                    			width: 100,
                    			text:value+'%'
                    			});                     
                    		}, 50);                     
                    	return Ext.String.format('
<div id="{0}"></div>
', id); } }

这边还有用到Ext.id()，生成唯一的id,展示进度条用到的div;
tdAttr之前有提过，
text:在进度条中显示的内容，查看progress bar的api,还有个更新进度条的方法，今天也有用到:

updateProgress( [Number value], [String text], [Boolean animate] ) : Ext.ProgressBar

Updates the progress bar value, and optionally its text. If the text argument is not specified, any existing text value will be unchanged. To blank out existing text, pass ''. Note that even if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for determining when the progress is complete and calling reset to clear and/or hide the control.
Parameters

    value : Number (optional)//进度条的值

    A floating point value between 0 and 1 (e.g., .5)

    Defaults to: 0
    text : String (optional)//进度条中显示的内容

    The string to display in the progress text element

    Defaults to: ""
    animate : Boolean (optional)//动画效果

    Whether to animate the transition of the progress bar. If this value is not specified, the default for the class is used

    Defaults to: false

Returns

    Ext.ProgressBar

    this

转自：http://joyliu.org/blog/archives/175