huoyunshen888
- 浏览: 81745 次
- 性别:
- 来自: 西安
-
最新评论
-
xieweiting：
把response返回属性改下， response.setCo ...
http://huoyunshen888.iteye.com/admin/blogs/new
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/StatusBar.js"> </script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/StatusBar.css" />
<script type="text/javascript">
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
// This is a shared function that simulates a load action on a StatusBar.
// It is reused by most of the example panels.
var loadFn = function(btn, statusBar){
btn = Ext.getCmp(btn);
statusBar = Ext.getCmp(statusBar);
btn.disable();
statusBar.showBusy();
(function(){
statusBar.clearStatus({useDefaults:true});
btn.enable();
}).defer(2000);
};
/*
* Basic StatusBar example
*/
new Ext.Panel({
title: 'Basic StatusBar',
renderTo: 'basic',
width: 350,
height: 100,
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'basic-button',
text: 'Do Loading',
handler: loadFn.createCallback('basic-button', 'basic-statusbar')
}],
bbar: new Ext.ux.StatusBar({
defaultText: 'Default status',
id: 'basic-statusbar',
items: [{
text: 'A Button'
}, '-', 'Plain Text', ' ', ' ']
})
});
/*
* Right-aligned StatusBar example
*/
new Ext.Panel({
title: 'Right-aligned StatusBar',
renderTo: 'right-aligned',
width: 350,
height: 100,
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'right-button',
text: 'Do Loading',
handler: loadFn.createCallback('right-button', 'right-statusbar')
}],
bbar: new Ext.ux.StatusBar({
defaultText: 'Default status',
id: 'right-statusbar',
statusAlign: 'right', // the magic config
items: [{
text: 'A Button'
}, '-', 'Plain Text', ' ', ' ']
})
});
/*
* StatusBar Window example
*/
var win = new Ext.Window({
title: 'StatusBar Window',
width: 400,
minWidth: 350,
height: 150,
modal: true,
closeAction: 'hide',
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'win-button',
text: 'Do Loading',
handler: loadFn.createCallback('win-button', 'win-statusbar')
}],
bbar: new Ext.ux.StatusBar({
id: 'win-statusbar',
defaultText: 'Ready',
items: [{
text: 'A Button'
}, '-',
new Date().format('n/d/Y'), ' ', ' ', '-', {
xtype:'tbsplit',
text:'Status Menu',
menuAlign: 'br-tr?',
menu: new Ext.menu.Menu({
items: [{text: 'Item 1'}, {text: 'Item 2'}]
})
}]
})
});
new Ext.Button({
text: 'Show Window',
renderTo: 'window',
handler: function(){
win.show();
}
});
/*
* Ext Word Processor example
*
* The StatusBar used in this example is completely standard. What is
* customized are the styles and event handling to make the example a
* lot more dynamic and application-oriented.
*
*/
// Create these explicitly so we can manipulate them later
var wordCount = new Ext.Toolbar.TextItem('Words: 0');
var charCount = new Ext.Toolbar.TextItem('Chars: 0');
var clock = new Ext.Toolbar.TextItem('');
new Ext.Panel({
title: 'Ext Word Processor',
renderTo: 'word-proc',
width: 500,
autoHeight: true,
bodyStyle: 'padding:5px;',
layout: 'fit',
bbar: new Ext.ux.StatusBar({
id: 'word-status',
// These are just the standard toolbar TextItems we created above. They get
// custom classes below in the render handler which is what gives them their
// customized inset appearance.
items: [wordCount, ' ', charCount, ' ', clock, ' ']
}),
items: {
xtype: 'textarea',
id: 'word-textarea',
enableKeyEvents: true,
grow: true,
growMin: 100,
growMax: 200,
listeners: {
// After each keypress update the word and character count text items
'keypress': {
fn: function(t){
var v = t.getValue(),
wc = 0, cc = v.length ? v.length : 0;
if(cc > 0){
wc = v.match(/\b/g);
wc = wc ? wc.length / 2 : 0;
}
Ext.fly(wordCount.getEl()).update('Words: '+wc);
Ext.fly(charCount.getEl()).update('Chars: '+cc);
},
buffer: 1 // buffer to allow the value to update first
}
}
},
listeners: {
render: {
fn: function(){
// Add a class to the parent TD of each text item so we can give them some custom inset box
// styling. Also, since we are using a greedy spacer, we have to add a block level element
// into each text TD in order to give them a fixed width (TextItems are spans). Insert a
// spacer div into each TD using createChild() so that we can give it a width in CSS.
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'});
// Kick off the clock timer that updates the clock el every second:
Ext.TaskMgr.start({
run: function(){
Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
},
interval: 1000
});
},
delay: 100
}
}
});
// This sets up a fake auto-save function. It monitors keyboard activity and after no typing
// has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
// After a fake delay so that you can see the save activity it will update again to indicate
// that the action succeeded.
Ext.fly('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);
}, this, {buffer:1500});
});
</script>
</head>
<body>
<h1>StatusBar Examples</h1>
<p>Here are several examples of using and customizing the Ext.ux.StatusBar component.</p>
<p>Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.</p>
<h2>Basic StatusBar</h2>
<p>This is a simple StatusBar with a few standard Toolbar items included.</p>
<div id="basic"></div>
<p>
<h2>Right-Aligned StatusBar</h2>
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added in
exactly the same order on the left side of the bar.</p>
<div id="right-aligned"></div>
<h2>Status Window</h2>
<p>You can add a StatusBar to a window in exactly the same way.</p>
<div id="window" style="margin-bottom:20px;"></div>
<h2>Customizing the Look and Feel</h2>
<p>This is a standard StatusBar with some custom CSS styles applied and some event handling in place to
handle the TextArea's keypress events. Notice that after you've stopped typing for a few seconds a
simulated auto-save process will begin.</p>
<div id="word-proc"></div>
</body>
</html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/StatusBar.js"> </script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/StatusBar.css" />
<script type="text/javascript">
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
// This is a shared function that simulates a load action on a StatusBar.
// It is reused by most of the example panels.
var loadFn = function(btn, statusBar){
btn = Ext.getCmp(btn);
statusBar = Ext.getCmp(statusBar);
btn.disable();
statusBar.showBusy();
(function(){
statusBar.clearStatus({useDefaults:true});
btn.enable();
}).defer(2000);
};
/*
* Basic StatusBar example
*/
new Ext.Panel({
title: 'Basic StatusBar',
renderTo: 'basic',
width: 350,
height: 100,
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'basic-button',
text: 'Do Loading',
handler: loadFn.createCallback('basic-button', 'basic-statusbar')
}],
bbar: new Ext.ux.StatusBar({
defaultText: 'Default status',
id: 'basic-statusbar',
items: [{
text: 'A Button'
}, '-', 'Plain Text', ' ', ' ']
})
});
/*
* Right-aligned StatusBar example
*/
new Ext.Panel({
title: 'Right-aligned StatusBar',
renderTo: 'right-aligned',
width: 350,
height: 100,
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'right-button',
text: 'Do Loading',
handler: loadFn.createCallback('right-button', 'right-statusbar')
}],
bbar: new Ext.ux.StatusBar({
defaultText: 'Default status',
id: 'right-statusbar',
statusAlign: 'right', // the magic config
items: [{
text: 'A Button'
}, '-', 'Plain Text', ' ', ' ']
})
});
/*
* StatusBar Window example
*/
var win = new Ext.Window({
title: 'StatusBar Window',
width: 400,
minWidth: 350,
height: 150,
modal: true,
closeAction: 'hide',
bodyStyle: 'padding:10px;',
items:[{
xtype: 'button',
id: 'win-button',
text: 'Do Loading',
handler: loadFn.createCallback('win-button', 'win-statusbar')
}],
bbar: new Ext.ux.StatusBar({
id: 'win-statusbar',
defaultText: 'Ready',
items: [{
text: 'A Button'
}, '-',
new Date().format('n/d/Y'), ' ', ' ', '-', {
xtype:'tbsplit',
text:'Status Menu',
menuAlign: 'br-tr?',
menu: new Ext.menu.Menu({
items: [{text: 'Item 1'}, {text: 'Item 2'}]
})
}]
})
});
new Ext.Button({
text: 'Show Window',
renderTo: 'window',
handler: function(){
win.show();
}
});
/*
* Ext Word Processor example
*
* The StatusBar used in this example is completely standard. What is
* customized are the styles and event handling to make the example a
* lot more dynamic and application-oriented.
*
*/
// Create these explicitly so we can manipulate them later
var wordCount = new Ext.Toolbar.TextItem('Words: 0');
var charCount = new Ext.Toolbar.TextItem('Chars: 0');
var clock = new Ext.Toolbar.TextItem('');
new Ext.Panel({
title: 'Ext Word Processor',
renderTo: 'word-proc',
width: 500,
autoHeight: true,
bodyStyle: 'padding:5px;',
layout: 'fit',
bbar: new Ext.ux.StatusBar({
id: 'word-status',
// These are just the standard toolbar TextItems we created above. They get
// custom classes below in the render handler which is what gives them their
// customized inset appearance.
items: [wordCount, ' ', charCount, ' ', clock, ' ']
}),
items: {
xtype: 'textarea',
id: 'word-textarea',
enableKeyEvents: true,
grow: true,
growMin: 100,
growMax: 200,
listeners: {
// After each keypress update the word and character count text items
'keypress': {
fn: function(t){
var v = t.getValue(),
wc = 0, cc = v.length ? v.length : 0;
if(cc > 0){
wc = v.match(/\b/g);
wc = wc ? wc.length / 2 : 0;
}
Ext.fly(wordCount.getEl()).update('Words: '+wc);
Ext.fly(charCount.getEl()).update('Chars: '+cc);
},
buffer: 1 // buffer to allow the value to update first
}
}
},
listeners: {
render: {
fn: function(){
// Add a class to the parent TD of each text item so we can give them some custom inset box
// styling. Also, since we are using a greedy spacer, we have to add a block level element
// into each text TD in order to give them a fixed width (TextItems are spans). Insert a
// spacer div into each TD using createChild() so that we can give it a width in CSS.
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'});
// Kick off the clock timer that updates the clock el every second:
Ext.TaskMgr.start({
run: function(){
Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
},
interval: 1000
});
},
delay: 100
}
}
});
// This sets up a fake auto-save function. It monitors keyboard activity and after no typing
// has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.
// After a fake delay so that you can see the save activity it will update again to indicate
// that the action succeeded.
Ext.fly('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);
}, this, {buffer:1500});
});
</script>
</head>
<body>
<h1>StatusBar Examples</h1>
<p>Here are several examples of using and customizing the Ext.ux.StatusBar component.</p>
<p>Note that the js is not minified so it is readable. See <a href="statusbar-demo.js">statusbar-demo.js</a>.</p>
<h2>Basic StatusBar</h2>
<p>This is a simple StatusBar with a few standard Toolbar items included.</p>
<div id="basic"></div>
<p>
<h2>Right-Aligned StatusBar</h2>
<p>This is a simple StatusBar that has the status element right-aligned. Any StatusBar items will be added in
exactly the same order on the left side of the bar.</p>
<div id="right-aligned"></div>
<h2>Status Window</h2>
<p>You can add a StatusBar to a window in exactly the same way.</p>
<div id="window" style="margin-bottom:20px;"></div>
<h2>Customizing the Look and Feel</h2>
<p>This is a standard StatusBar with some custom CSS styles applied and some event handling in place to
handle the TextArea's keypress events. Notice that after you've stopped typing for a few seconds a
simulated auto-save process will begin.</p>
<div id="word-proc"></div>
</body>
</html>
分享到：
发表评论
-
ExtJs表格点击超链接获取行的值
2011-08-03 23:53 1593grid双击事件，并得到单 ... -
extjs
2011-07-31 10:42 711var record_start=0; columns:[n ... -
ExtJs分页精解（java应用）
2011-07-28 21:48 1067ExtJs的分页做的相当出色！在此，我们简单的分析一下它的分页 ... -
ExtJs实现EditGrid中的增删改查操作（2）
2011-07-27 23:18 45012.本例是在ExtJs官方提供 ... -
ExtJS GridPanel分页、添加、删除、修改
2011-07-27 23:07 2206CheckboxSelectionModel是grid的选择模 ... -
extjs做的添加,删除给大家分享一下.加载数据的数据
2011-07-27 23:05 1395<!DOCTYPE html PUBLIC " ... -
extjs
2011-07-24 14:14 848我想改变默认extjs字体的大小，应该怎么做？ AJAX读 ... -
http://huoyunshen888.iteye.com/admin/blogs/new
2011-07-24 13:23 860我用extjs+struts1.2做文件上传时，当文件上传成功 ... -
ext
2011-07-24 10:51 1115<%@ page language="java ... -
ExtJS 初步應用 ProgressBar
2011-07-06 22:51 985<!DOCTYPE HTML PUBLIC " ... -
extjs combox
2011-07-06 22:24 1084var crdtypeStore_CX = new Ext.d ... -
extjs开发包
2011-07-05 21:24 687
相关推荐
$ git clone https://github.com/vbalien/vbalien-yabai-statusbar.git $HOME /Library/Application \ Support/Übersicht/widgets/vbalien 预习 yabai이벤트 yabai -m signal --add event=application_activated \...
CBCGPRibbonComboBox allows to display a popup calculator window. Just call CBCGPRibbonComboBox::EnableCalculator method to assign a calculator to the ribbon combobox. Override a new '...
Added a statusbar to the hexview in memoryview Pointerscan for value scans now add the results to the overflow queue Opening a file and changing bytes do not change them to the file anymore (you need ...
stdout and stderr into a window(125KB)<END><br>94,GradientTitleBar.zip This article shows you how to give your Win95/NT4 modeless dialogs a Win98/W2K like gradient title bar.(42KB)<END><br>95,...
(123KB)<END><br>15,custfile.zip This sample shows how to add a couple of extra buttons to a CFileDialog. (23KB)<END><br>16,custlist.zip CUSTLIST shows how to use custom draw in a list view ...
capture a picture of, make them stay-on-top, send a message to, edit the window style, and flash the title bar on almost any target! <END><br>60,LBApi.zip This program uses Sendmessage API function...
o When adding a folder to scan (with the Add button), the folder path in now delimited with quotes, to ensure that it'll be scanned properly if the folder name contains a comma character. * ...
opening a file.(82KB)<END><br>82,WndTabs250.exe Window and File Management For Visual C++(1498KB)<END><br>83,WizGen.zip This Add-in is similar to class wizard but can be used for MFC extension ...
The initial toolbar and status bar are constructed in the CMainFrame class. Edit this toolbar bitmap using the resource editor, and update the IDR_MAINFRAME TOOLBAR array in ChatClient.rc to add ...
The initial toolbar and status bar are constructed in the CMainFrame class. Edit this toolbar bitmap along with the array in MainFrm.cpp to add more toolbar buttons. AppWizard creates one ...
You can now add multiple files to a project at once. Project enhancements Git and Subversion support has been added. File icons now indicate the PL/SQL Developer file type. Table Definition Editor ...
Status display is displayed in the status bar at all times with a traffic light style visual indicator, so that you instantly know if files have changed. Avoid “dirty commits” and keep your work ...
o Added number of remote connections to the status bar. o Added ports information in the tray icon tooltip. * Version 1.51: o Fixed bug: In rare cases, exception window may appear when starting ...
You can now add multiple files to a project at once. Project enhancements Git and Subversion support has been added. File icons now indicate the PL/SQL Developer file type. Table Definition Editor ...
API: Add View.text_to_window() and View.layout_to_window() API: All API functions now accept and return device-independent-pixels API: Fixed input panel not running on_cancel when re-showing the input...
Users are able to easily check all the comments by checking the option to “Show Comments” on the status bar of the workspace. 5.Rulers and Grids This feature provides horizontal and vertical ...
Source code + tutorial.<END><br>26 , chat.zip This code shows you how to creat a local network chat room so that you and your friends can have a chat room which nowone else can enter<END><br>27 , ...
Most iOS Apps Have a Single Window 17 Two Types of Software Run in iOS 17 Safari on iOS Provides the Web Interface 18 Chapter 2 Human Interface Principles 21 Aesthetic Integrity 21 Consistency 21 ...
The initial toolbar and status bar are constructed in the CMainFrame class. Edit this toolbar bitmap using the resource editor, and update the IDR_MAINFRAME TOOLBAR array in Cell.rc to add ...