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