藏經閣: javascript

顯示具有 javascript 標籤的文章。顯示所有文章

2012/11/08

[ExtJS 4] Change Progress Bar Color Dynamically According to the Value of Progress Bar

ExtJS doesn’t provide API to change progress bar dynamically. However, it’s not too diffcult to make it possible by changing CSS dynamically. In the following example, we implement a lister for update event, which change CSS according to the value of progress bar.

blue progress bar if value < 0.5

red progress bar if value >= 0.5

It’s tested on Firefox 16, Chome 22, and IE 9 with ExtJS 4.1.1a.

progressbar.htm

Ext.require([
    'Ext.ProgressBar'
]);
Ext.onReady(function(){
    var pbar = Ext.create('Ext.ProgressBar', {
        id:'pbar',
        width:300,
        renderTo:'bar',
        listeners: {
            update: {
              fn: function (bar, value) {
                    if(value<0.5)
                    this.setUI('blue');
                else
                    this.setUI('red');
              }
            }
        }
    });
    var btn = Ext.get('btn');
    btn.on('click', function(){
        pbar.wait({
            interval: 500,
            duration: 5000,
            increment: 15,
            fn:function() {
            }
        });
    });
});

</script>

.x-progress-blue .x-progress-bar {
    border-right-color: #0000FF;
    border-top-color: #0000FF;
    background-image: none;
    background-color: #0000FF;
}
</style>
</head>
<body>
    <button id="btn">Show</button>
    <BR />
    <div id="bar"></div>
</body>
</html>

2012/05/09

[ExtJS 4.1] Mark a red Asterisk/Star on an Required Fields

Making a red asterisk on required fields makes your user realize they are not allowed to be blank by intuition. In ExtJS, you can specify fields which cannot be blank such as the following code.

            items : [ {
                xtype : 'textfield',
                fieldLabel : 'Name',
                allowBlank : false,
            }, {
                xtype : 'numberfield',
                fieldLabel : 'Age'
            } ]

I found a patch working fine on ExtJS 4.07 to realize this requirement.

Ext.override(Ext.layout.Layout, { renderItem: function(item, target, position) { if (item && !item.rendered && item.isFieldLabelable && item.fieldLabel && item.allowBlank == false) { item.fieldLabel += '<span class="req" style="color:red">*</span>'; } this.callOverridden(arguments); } });

ExtJS 4.0 Mark a red Asterisk on an Required Field

Mark a red Asterisk on an Required Field on ExtJS 4.1

And I modify it a little bit to make it work in ExtJS 4.1 MVC application architecture as following.

this.control({
 'field' : {
  beforerender : function(thisField, eOpts) {
   if (thisField && !thisField.rendered && thisField.isFieldLabelable && thisField.fieldLabel && thisField.allowBlank == false) {
    thisField.fieldLabel += '<span class="req" style="color:red">*</span>';
   }
  }   
 }
});

2012/02/18

[ExtJS] Keeping Grid Selections After a Store Reload in Grid

In some cases, we have no idea what time the data in grid is out of date. In order to get the last data in server, it’s necessary reload store in grid periodically. However, after a single/multiple slelection grid reload, the selection state will be lost (i.e., No records are selected).

A checkbox selection example

To slove this probelm, firstly, we have to push each selected records into grid’s variable selectedRecords whenever 'selectionchange' event is fired from grid. Something like this:

Ext.each(selecteds, function(selected) {
me.selectedRecords.push(selected.index);
});

Secondly, restore the selection state by selecting the records recored in selectedRecords whenever 'datachanged' event is fired from store (i.e., data is reloaded from server) is fired.

Ext.each(me.selectedRecords, function(r) {
me.getSelectionModel().select(r, true);
});
The complete example code is shown below. It’s tested under ExtJS4.0.

SelectionStatefulGrid.js

Ext.define('Vos.view.SelectionStatefulGrid', {
    extend : 'Ext.grid.Panel',
    selType : 'checkboxmodel',
    selModel : {
        mode : 'MULTI'
    },
    store : 'myStore',
    columns : [
        {
            header : 'my date',
            dataIndex : 'data'
        }
    ],
    initComponent : function() {
        var me = this;
        me.callParent();
        me.selectedRecords = [];
        me.unlockState = false;
        // Push the the selection state into selectedRecords
        me.on('selectionchange', function(selectionModel, selecteds) {
            if (me.selectedRecords != null && me.unlockState) {
                me.selectedRecords = [];
                Ext.each(selecteds, function(selected) {
                    me.selectedRecords.push(selected.index);
                });
            }
        });
         // Select the records in selectedRecords
         me.getStore().on('datachanged', function(store, records) {
            Ext.each(me.selectedRecords, function(r) {
                me.unlockState = false;
                me.getSelectionModel().select(r, true);
            });
            me.unlockState = true;
        });
    }
});

訂閱：文章 (Atom)

藏經閣

fe-tool

🔥《台灣人在大陸買房條件與流程攻略》

🔥《JSON5 vs JSON》

🔥《React State Management 2025》

🔥《React State Management Comparison》

🔥《What is Bun.js》