チュートリアルをなめるだけだけど、毎日少しづつやるだけでも
気分がよい。
早速、
■MessageBox
メッセージボックスが出た。
なにせ、パラメータが多い。でも、いろいろ備わってて面白い。
サンプル貼り付けるだけで満足だわな。
モーダル、モードレスもあるし、
シングルライン、マルチラインのIFも持っててコールバックで取れるし。
面白くなってきた。
//--- onReadyの分割テスト ---
Ext.onReady(
function()
{
var processResult = function( btn, text )
{
Ext.MessageBox.alert( btn + text )
}
//--- チュートリアル３(イベントハンドらに名前をつける) ---
//--- イベントハンドラを別定義 ---
var highlight = function()
{
Ext.select('p').highlight();
}
//--- 引数つきのイベントハンドラ ---
var highlight_arg = function(e)
{
//Ext.get( e.target ).highlight
//--- チュートリアル ---
var paragraph = Ext.get(e.target);
paragraph.highlight();
// Ext.MessageBox.show(
// {
// title: 'Paragraph Clicked',
// msg: paragraph.dom.innerHTML,
// width:400,
// buttons: Ext.MessageBox.OK,
// animEl: paragraph
// }
// );
//--- リファレンスサンプル ---
//alert( String title, String msg, [Function fn], [Object scope] )
//title : String
//The title bar text
//msg : String
//The message box body text
//fn : Function
//(optional) The callback function invoked after the message box is closed
//scope : Object
//(optional) The scope of the callback function
// Basic alert:
// Ext.Msg.alert('Status', 'Changes saved successfully.');
// Prompt for user data and process the result using a callback:
// Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
// if (btn == 'ok'){
// // process text value and close...
// }
// });
// Showメソッドのパラメータは多いなぁ。
//Property Type Description
//---------------- --------------- -----------------------------------------------------------------------------
//animEl String/Element An id or Element from which the message box should animate as it opens and
// closes (defaults to undefined)
//buttons Object/Boolean A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
// cancel:'Bar'}), or false to not show any buttons (defaults to false)
//closable Boolean False to hide the top-right close button (defaults to true). Note that
// progress and wait dialogs will ignore this property and always hide the
// close button as they can only be closed programmatically.
//cls String A custom CSS class to apply to the message box element
//defaultTextHeight Number The default height in pixels of the message box's multiline textarea if
// displayed (defaults to 75)
//fn Function A callback function to execute after closing the dialog. The arguments to the
// function will be btn (the name of the button that was clicked, if applicable,
// e.g. "ok"), and text (the value of the active text field, if applicable).
// Progress and wait dialogs will ignore this option since they do not respond to
// user actions and can only be closed programmatically, so any required function
// should be called by the same code after it closes the dialog.
//icon String A CSS class that provides a background image to be used as an icon for
// the dialog (e.g., Ext.MessageBox.WARNING or 'custom-class', defaults to '')
//maxWidth Number The maximum width in pixels of the message box (defaults to 600)
//minWidth Number The minimum width in pixels of the message box (defaults to 100)
//modal Boolean False to allow user interaction with the page while the message box is
// displayed (defaults to true)
//msg String A string that will replace the existing message box body text (defaults
// to the XHTML-compliant non-breaking space character ' ')
//multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
//progress Boolean True to display a progress bar (defaults to false)
//progressText String The text to display inside the progress bar if progress = true (defaults to '')
//prompt Boolean True to prompt the user to enter single-line text (defaults to false)
//proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
//title String The title text
//value String The string value to set into the active textbox element if displayed
//wait Boolean True to display a progress bar (defaults to false)
//waitConfig Object A Ext.ProgressBar.waitConfig object (applies only if wait = true)
//width Number The width of the dialog in pixels
// Show a dialog using config options:
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
fn: processResult,
animEl: 'elId',
icon: Ext.MessageBox.QUESTION,
modal:true,
prompt: true
}
);
}
//--- pタグのイベントハンドラ ---
//Ext.select('p').on('click', highlight );
Ext.select('p').on('click', highlight_arg );
}//function
);//OnReaady
0 件のコメント:
コメントを投稿