uniGUI学习之脱离Delphi直接写ExtJS从入门到精通07ExtJS事件(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><!------------------------------------------------------------------------------------------------------->