uniGUI學習之ExtJS事件(51)

最少代碼：HelloWorld.html源文件下載

ExtJS入門教程01，Window如此簡單，你怎能不會？

<link  rel="stylesheet" href="theme-triton-all.css">
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/

var aButton =new Ext.Button({ text: 'Click me點我呀',renderTo: Ext.getBody()});

aButton.on("click", function () {
    Ext.MessageBox.progress("進度", "正在處理，請稍候...", "0%");   //顯示進度條
    zz(0.01);                                                   //從0.01開始 走
});

var zz = function (i) {
    if (i >= 1)    //判斷 進度i,
        { Ext.MessageBox.updateProgress(1, "處理完成"); // 到1 ,顯示，處理完成
                      Ext.defer(function () { Ext.MessageBox.close(); }, 2000);  //延時 2000毫秒，自動關閉
                      return;  }  //退出zz

    Ext.MessageBox.updateProgress(i, Math.round(i * 100) + "%");  //使進度條狀態改變
    Ext.defer(function () { zz(i + 0.1);  }, 500);            // 延時 500毫秒，遞歸調用zz，進度i加 0.1
};

}); </script><!------------------------------------------------------------------------------------------------------->

https://www.cnblogs.com/youring2/p/extjs-100-examples-003-messagebox-with-progressbar.html

 

//在UniGUI里的寫法
procedure TMainForm.UniButton1Click(Sender: TObject);
var
  i: Integer;
begin
  ShowProgress('Please Wait...');
  UniSession.Synchronize;

  for i := 1 to 10 do
  begin
    Sleep(500);
    UpdateProgress(i/10, Format('%%%d Completed', [i*10]));   
    UniSession.Synchronize;
  end;
  HideProgress;
  ShowToast('Process Finished');
end;

 

<link  rel="stylesheet" href="theme-graphite-all.css">
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*----------------------------------------------------------------------------*/

Ext.create('Ext.form.TextField', {
renderTo: Ext.getBody(),  
  　   　id:'myTextField',  
});  

Ext.get('myTextField').on('keypress',function(e){/*on()是addListener()的簡寫，removeListener()的簡寫un() */
//監聽鍵盤事件
        if(e.charCode==Ext.EventObject.SPACE){
            Ext.Msg.alert('info','空格');
        }
});

Ext.get('myTextField').on('click', function(){  
                //處理點擊事件代碼  
document.title="New Title!";
});  

}); </script><!------------------------------------------------------------------------------------------------------->

  

<link  rel="stylesheet" href="theme-graphite-all.css">
<script src="ext-all.js"></script>   
<script>Ext.onReady(function () { /*----------------------------------------------------------------------------*/

Ext.create('Ext.form.TextField', {
        renderTo: Ext.getBody(),  

   enableKeyEvents: true,
   listeners: { keyup: function(src, evt){alert(src.getValue());} }
});  

}); </script><!------------------------------------------------------------------------------------------------------->