|
此状态栏参考extjs官方文档写的,具体不懂得请看官方文档 --------------------------------------------------- 截图如下：     ---------------------------------------------------------------------- 源代码如下： ----------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../ux/statusbar/css/statusbar.css" /> <link rel="stylesheet" type="text/css" href="../shared/examples.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> <script type="text/javascript" src="../shared/examples.js"></script> <script type="text/javascript" src="../form/states.js"></script> <script type="text/javascript" src="StatusBar.js"></script> <script type="text/javascript" src="../ux/statusbar/ValidationStatus.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); var bd=Ext.getBody(); //===================1. 标准的statusbar======================= bd.createChild({tag:'h2',html:'1. 标准的statusbar'}); var comboData=[ ['text1','value1'], ['text2','value2'], ['text3','value3'] ]; var comboStore=new Ext.data.SimpleStore({ data:comboData, fields:['text','value'] }); var combo=new Ext.form.ComboBox({ store:comboStore, displayField:'value', valueField:'text', mode:'local', triggerAction:'all', emptyText:'请选择', width:60, listeners:{ 'select':function(combo){ var c=combo.getValue(); var sb=Ext.getCmp('statusbar-id'); sb.setStatus({ text:c, iconCls:'', clear:true }); } } }); var statusbar=new Ext.Panel({ title:'标准的statusBar', width:1000, height:200, bbar:new Ext.ux.StatusBar({ defaultText:'默认文本', id:'statusbar-id', items:[ { text:'修改status,看变化', handler:function(){ var sb=Ext.getCmp('statusbar-id'); sb.setStatus({ text:'修改状态啦!!5秒后恢复原状态', iconCls:'x-status-error', //clear:true clear:{ wait:5000,//等待5秒后改变状态 anim:true,//是否有淡出动画 useDefaults:true,//自定义的状态在 5秒后是否恢复为原来的默认状态,默认为true } }); } }, ' ','-',' ', { text:'修改status,看变化', handler:function(){ var sb=Ext.getCmp('statusbar-id'); sb.setStatus({ text:'修改状态啦!!不回复原状态,变空', iconCls:'x-status-error', //clear:true clear:{ wait:5000,//等待5秒后改变状态 anim:true,//是否有淡出动画 useDefaults:false,//自定义的状态在5秒后是否恢复为原来的默认状态 } }); } }, ' ','-',' ', { text:'修改status,看变化', handler:function(){ var sb=Ext.getCmp('statusbar-id'); sb.setStatus({ text:'修改状态啦!!装填不会自动改变!!', iconCls:'x-status-error', clear:false//改变后的状态不会自动消失 }); } }, ' ','-',' ', { text:'删除状态栏', handler:function(){ var sb=Ext.getCmp('statusbar-id'); sb.clearStatus(); } }, ' ','-',' ', { text:'busy状态', handler:function(){ var sb=Ext.getCmp('statusbar-id'); sb.showBusy(); } }, ' ','-',' ', new Date().format('Y年m月d日'), ' ','-',' ', combo ] }) }); statusbar.render(document.body); //=======================2. 文字处理实例================================ //注意:status的状态不可变 bd.createChild({tag:'h2',html:'2. 文字处理实例'}); //输入单词,看状态栏变化 var wordCount=new Ext.Toolbar.TextItem('Words : 0'); var charCount=new Ext.Toolbar.TextItem('Chars : 0'); var clock=new Ext.Toolbar.TextItem(''); var statusbar2=new Ext.Panel({ title:'文字处理--状态栏', width:600, height:150, layout:'fit', bodyStyle:'padding:10px;', bbar:new Ext.ux.StatusBar({ defaultText:'文字处理实例', id:'word-status',//这个名字是不可变的 items:[ wordCount,' ','-',' ', charCount,' ','-',' ', clock,' ','-',' ' ] }), items:[ { xtype:'textarea', id:'word-textarea', grow:true, enableKeyEvents:true, layout:'fit', listeners:{ 'keypress':{ fn:function(t){ var v=t.getValue(); var wc=0; var cc=v.length?v.length:0; if(cc > 0){ wc=v.match(/\b/g);//这里是一组分隔符,',,,,,,,,,'代表输入到第五个单词了 //alert(wc); wc=wc ? wc.length/2:0; } Ext.fly(wordCount.getEl()).update('word:'+wc); Ext.fly(charCount.getEl()).update('char:'+cc); }, buffer:1//一秒刷新一次 } } } ], listeners:{ render:{ fn:function(){ Ext.fly(wordCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'}); Ext.fly(charCount.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'}); Ext.fly(clock.getEl().parent()).addClass('x-status-text-panel').createChild({cls:'spacer'}); Ext.TaskMgr.start({ run: function(){ Ext.fly(clock.getEl()).update(new Date().format('g:i:s A')); }, interval: 1000 }); }, delay:1000 } } }); Ext.getCmp('word-textarea').on('keypress', function(){ var sb = Ext.getCmp('word-status'); sb.showBusy('Saving draft...'); (function(){ sb.setStatus({ iconCls: 'x-status-saved', text: 'Draft auto-saved at ' + new Date().format('g:i:s A') }); }).defer(4000);//执行括号里面的函数前等待4秒 }, this, {buffer:1500});//按键事件缓冲1.5秒以后执行按键函数 statusbar2.render(document.body); //=======================3. 高级状态条================================ bd.createChild({tag:'h2',html:'3. 高级状态条'}); var formpanel=new Ext.form.FormPanel({ id:'formpanel_status', bodyStyle:'padding:10px 10px 0', frame:true, width:600, height:300, defaults:{ width:300, height:30, emptyText:'请输入...', allowBlank:false, selectOnFocus:true,//这个是必须地 msgTarget:'side' }, items:[ { xtype:'textfield', fieldLabel:'Name', blankText:'Name is required' }, { xtype:'datefield', fieldLabel:'Birthday', blankText:'Birthday is required'//blankText是高级工具条特有的 } ], buttons:[{ text:'Save', xtype:'button', handler:function(){ if(formpanel.getForm().isValid()){ var sb=Ext.getCmp('form-statusbar'); sb.showBusy('saving form...'); formpanel.getEl().mask(); formpanel.getForm().submit({ url:'status.jsp', success:function(){ sb.setStatus({ text:'form success!', iconCls:'x-status-saved', clear:false }); formpanel.getEl().unmask(); } }); } } }] }); var formStatus=new Ext.Panel({ title:'高级状态栏', width:'450', layout:'fit', height:'200', items:formpanel, bbar:new Ext.ux.StatusBar({ id:'form-statusbar', defaultText:'Ready', plugins:new Ext.ux.ValidationStatus({form:'formpanel_status'}) }) }); formStatus.render(document.body); }); </script> </head> <body> </body> </html> ------------------------------------------------------------------------------------------------
|
|
|
