菠蘿三國

文檔載入結束 初始化dom
Ext.onReady(function(){
        //初始化以及應用代碼
});

彈出警告對話框
Ext.MessageBox.alert("Warning", "This example is not done and results may vary.");

表單
<form id="form1" class="x-form">        //整個表單的樣式
<div style="width:800px;">        //表單寬度顯示
        <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>        //表單頂部樣式
        <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">                        //表單中部樣式
                <h3 style="margin-bottom:5px;">Ext Live Forms</h3>        //表單頭部
                <div class="x-form-bd" id="container">                        //表單中部
                        <fieldset>                                        //分割欄
                               
                            <div class="x-form-item">                        //表單內部元素
                                <label for="combo-local">Local Data:</label>        //標題
                                <div class="x-form-element">                        //表單元素樣式
                                        <input type="text" size="20" name="combo-local" id="combo-local" />
                                </div>                  
                        </div>


                        <div class="x-form-item">                        //日期表單元素
                                <label for="markup-date">Date:</label>
                                <div class="x-form-element">
                                        <input type="text" size="10" value="03/08/03" name="markup-date" id="markup-date" />
                                </div>
                        </div>
                        /*
                       
                            var date = new Ext.form.DateField({        //構造日期選擇元素的ext代碼
                                        allowBlank:false                //不允許空白
                                });
                            date.applyTo('markup-date');
                       
                        */




                        <div class="x-form-item">
                                <label for="combo-tpl">Unobtrusive:</label>
                                <div class="x-form-element">
                                    <select name="light" id="light">
                                        <option value="Shade">Shade</option>
                                        <option value="Mostly Shady">Mostly Shady</option>
                                        <option value="Sun or Shade">Sun or Shade</option>

                                        <option value="Mostly Sunny">Mostly Sunny</option>

                                        <option value="Sunny">Sunny</option>
                                    </select>                           
                                </div>
                        </div>
                        /*
                            var tranny = new Ext.form.ComboBox({
                                typeAhead: true,                //類型在前？
                                triggerAction: 'all',                //引發(fā)動作？
                                transform:'light',                //轉變表單元素ID
                                width:120,
                                forceSelection:true                //強制選擇
                            });
                        */



                        <div class="x-form-item">                        //日期表單元素
                                <label for="markup-date">Date:</label>
                                <div class="x-form-element">
                                        <input type="text" size="20" name="required" id="required" />
                                </div>
                        </div>

                        /*
                            var required = new Ext.form.TextField({
                                allowBlank:false,
                                vtype:'alphanum'        //字段樣式        url|email|alpha
                            });
                            required.applyTo('required');

                        */


                        </fieldest>
                </div>               
        </div></div></div>               
        <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>        //表單底部樣式
</div>
</form>


1 表單內元素需要使用div class="x-form-element"標簽環(huán)繞，但是同一個標簽中可以包含多個表單元素





對話框的使用
1 ：Confirm對話框
<button id="mb1">Show Me</button>
/*
    Ext.get('mb1').on('click', function(e){
        Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);        //關鍵點在于回調函數(shù)
    });
   
    function showResult(btn){
        Ext.example.msg('Button Click', 'You clicked the {0} button', btn);                        //這里有一個{0}看起來可以在這里種使用模板
    };

*/

2：警告對話框
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
3：單行文本輸入對話框
Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
4：多行文本輸入對話框

        Ext.MessageBox.show({
           title: 'Address',                        //標題
           msg: 'Please enter your address:',        //正文信息
           width:300,                                //寬度
           buttons: Ext.MessageBox.OKCANCEL,        //按鈕設定 使用 Ext.MessageBox.OKCANCEL 可選 YESNOCANCEL
           multiline: true,                        //多行編輯
           fn: showResultText,                        //回調函數(shù)
           animEl: 'mb3'                        //綁定動畫的元素名稱
       });

5：輸入對話框 如果不指定multiline的話就可以不顯示輸入框
        Ext.MessageBox.show({
           title:'Save Changes?',
           msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
           buttons: Ext.MessageBox.YESNOCANCEL,
           fn: showResult,
           animEl: 'mb4'
       });


6：進度條
        Ext.MessageBox.show({
           title: 'Please wait...',
           msg: 'Initializing...',
           width:240,
           progress:true,
           closable:false,
           animEl: 'mb6'
       });

       // this hideous block creates the bogus progress
       var f = function(v){
            return function(){
                if(v == 11){
                    Ext.MessageBox.hide();
                }else{
                    Ext.MessageBox.updateProgress(v/10, 'Loading item ' + v + ' of 10...');        //更新進度條狀態(tài) 參數(shù)為狀態(tài)圖和狀態(tài)文字
                }
           };
       };
       for(var i = 1; i < 12; i++){
           setTimeout(f(i), i*1000);                        //每隔1秒調用f一次       
       }

7：復雜對話框（對話框設定內容）
<input type="button" id="show-dialog-btn" value="Show Dialog" />                //由這個按鈕觸發(fā)


        對話框內的內容
    <!-- dialog is created from existing markup -->
    <div id="hello-dlg" style="visibility:hidden;">
            <div class="x-dlg-hd">Layout Dialog</div>
            <div class="x-dlg-bd">
                <div id="west" class="x-layout-inactive-content">
                        West
                    </div>
                    <div id="center" class="x-layout-inactive-content" style="padding:10px;">
                <p>This dialog has the Vista theme applied.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
                    </div>
            </div>
        </div>


    showBtn.on('click', this.showDialog, this);調用方法        第二個
    showDialog : function(){
            if(!dialog){ // lazy initialize the dialog and only create it once        對話框之創(chuàng)建一次
                dialog = new Ext.LayoutDialog("hello-dlg", {                        設定對話框句柄        第一個參數(shù)表示所要引用的dom元素
                        modal:true,                                //形式設定
                        width:600,                               
                        height:400,
                        shadow:true,                                //陰影
                        minWidth:300,                                //最大最小形狀
                        minHeight:300,       
                        proxyDrag: true,                        //允許拖拽
                        west: {                                        //為west對象設定布局
                                split:true,                        //分隔
                                initialSize: 150,
                                minSize: 100,
                                maxSize: 250,
                                titlebar: true,
                                collapsible: true,
                                animate: true
                            },
                            center: {                                //為center元素設定布局
                                autoScroll:true,
                                tabPosition: 'top',
                                closeOnTab: true,
                                alwaysShowTabs: true
                            }
                });
                //定義好對話框的布局
               
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('Submit', dialog.hide, dialog);
                dialog.addButton('Close', dialog.hide, dialog);
               

                //獲得對話框布局的句柄
                var layout = dialog.getLayout();
                layout.beginUpdate();
                layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));                        //為布局設定位置
                    layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
                // generate some other tabs
                layout.add('center', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Another Tab', background:true}));        //為布局設定位置引用
                    layout.add('center', new Ext.ContentPanel(Ext.id(), {
                                        autoCreate:true, title: 'Third Tab', closable:true, background:true}));
                    layout.endUpdate();                                                                        //更新布局
            }
            dialog.show(showBtn.dom);
        }






布局修改器        東east        西:west        南：south        北：north
1 簡單布局
<div id ="header"></div>
<div id ="footer"></div>
<div id ="nav"></div>
<div id ="content"></div>

                       var layout = new Ext.BorderLayout(document.body, {        //參數(shù)為應用面板的根元素        邊框布局
                            north: {                                                //使用對象方式設定布局        北
                                split:false,                                        //分割線
                                initialSize: 35                                        //初始化大小
                            },
                            south: {                                                                        南
                                split:false,
                                initialSize: 20
                            },
                            west: {                                                                        西
                                split:false,
                                initialSize: 200,
                                collapsible: false
                            },
                            center: {
                                autoScroll: true                                自動滾動                        中間
                            }
                        });
                        layout.beginUpdate();
                        layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));        //為布局添加內部元素        內容面板         參數(shù)為適合結構
                        layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
                        layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
                        layout.add('center', new Ext.ContentPanel('content'));
                        layout.endUpdate();


2 復雜布局

                       var layout = new Ext.BorderLayout(document.body, {
                            west: {
                                split:true,
                                initialSize: 240,
                                titlebar: true,
                                collapsible: true,
                                minSize: 100,
                                maxSize: 400
                            },
                            center: {
                                autoScroll: true
                            },
                            east: {
                                split:true,
                                initialSize: 240,
                                titlebar: true,
                                collapsible: true,
                                minSize: 100,
                                maxSize: 400
                            }
                        });
                                       
                        layout.beginUpdate();
                        
                        layout.add('west', new Ext.ContentPanel('nav1', {title: '翻譯項目', fitToFrame:true, closable:false}));
                        layout.add('west', new Ext.ContentPanel('nav2', {title: '審校項目', fitToFrame:true, closable:false}));
                        layout.add('west', new Ext.ContentPanel('nav3', {title: '所有項目', fitToFrame:true, closable:true}));
                      
                                    var innerLayout = new Ext.BorderLayout('content', {
                            south: {
                                split:true,
                                initialSize: 200,
                                minSize: 100,
                                maxSize: 400,
                                autoScroll:true,
                                collapsible:true,
                                titlebar: true
                            },
                            center: {
                                autoScroll:true
                            },
                                                north: {
                                split:true,
                                initialSize: 200,
                                minSize: 100,
                                maxSize: 400,
                                autoScroll:true,
                                collapsible:true,
                                titlebar: true
                                                }
                        });
                        
                                        innerLayout.add('south', new Ext.ContentPanel('inner1', "更多信息"));
                                        innerLayout.add('south', new Ext.ContentPanel('inner3', "更多信息"));
                        innerLayout.add('center', new Ext.ContentPanel('inner2', "文檔列表"));
                        innerLayout.add('north', new Ext.ContentPanel('inner2', "文檔列表"));
                                       
                                        layout.add('east', new Ext.ContentPanel('nav4',{title: 'kao',fitToFrame:true, colsable:false}))
                        layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
                        layout.endUpdate();


布局的使用方法是 先創(chuàng)建Ext.BorderLayout 然后設定邊框布局的樣式
                            west: {
                                split:true,
                                initialSize: 240,
                                titlebar: true,
                                collapsible: true,
                                minSize: 100,
                                maxSize: 400
                            },
                            center: {
                                autoScroll: true
                            },
                            east: {
                                split:true,
                                initialSize: 240,
                                titlebar: true,
                                collapsible: true,
                                minSize: 100,
                                maxSize: 400
                            }
然后layout.beginUpdate(); 然后添加布局內容
                        layout.add('west', new Ext.ContentPanel('nav1', {title: '翻譯項目', fitToFrame:true, closable:false}));
最后layout.endUpdate();
               

關鍵點在于對頁面上存在的一些元素的引用

對象傳遞參數(shù)的方法是 {屬性:'值',屬性:'值'}

布局時候使用在邊上的參數(shù)可以是
                                split:true,                        //分割線，可以允許拖動
                                initialSize: 202,
                                minSize: 175,
                                maxSize: 400,                       
                                titlebar: true,                        //工具條，包括關閉按鈕 和標簽頁的頭信息顯示
                                collapsible: false,                //可以縮進
                                animate: false                        //縮進時使用動畫

                在中間的參數(shù)
                                titlebar: true,                        //頂部的工具欄
                                autoScroll:true,                //
                                closeOnTab: true                //Tab上可以使用close按鈕




更高級的布局管理
            layout = new Ext.BorderLayout(document.body, {
                north: {
                    split:false,
                    initialSize: 25,
                    titlebar: false
                },
                west: {
                    split:true,
                    initialSize: 200,
                    minSize: 175,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoScroll:false,
                    useShim:true,                                        //使用薄片
                    cmargins: {top:0,bottom:2,right:2,left:2}                //設定頁邊空白
                },
                east: {
                    split:true,
                    initialSize: 200,
                    minSize: 175,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoScroll:false,
                    useShim:true,
                    collapsed:true,
                    cmargins: {top:0,bottom:2,right:2,left:2}
                },
                south: {
                    split:false,
                    initialSize: 22,
                    titlebar: false,
                    collapsible: false,
                    animate: false
                },
                center: {
                    titlebar: false,
                    autoScroll:false,
                    tabPosition: 'top',                                        //tab位置 只能選擇在頂部
                    closeOnTab: true,                                       
                    alwaysShowTabs: true,                                //總是顯示tabs
                    resizeTabs: true                                        //更改tab位置
                }
            });
            // tell the layout not to perform layouts until we're done adding everything
            layout.beginUpdate();
            layout.add('north', new Ext.ContentPanel('header'));
            
            // initialize the statusbar
            statusPanel = new Ext.ContentPanel('status');
            south = layout.getRegion('south');                                //布局的獲得區(qū)域方法
            south.add(statusPanel);                                        //在區(qū)域中添加內容的方法
            
            // create the add feed toolbar
            var feedtb = new Ext.Toolbar('myfeeds-tb');                        //創(chuàng)建了一個工具欄引用
            // They can also be referenced by id in or components
            feedtb.add( {                                                //為工具欄添加一個元素
              id:'add-feed-btn',                                                        //id
              icon: 'images/add-feed.gif', // icons can also be specified inline        //圖標
              cls: 'x-btn-text-icon',                                                        //樣式
              text: 'Add feed',                                                                //文字
              handler: this.showAddFeed.createDelegate(this),                                //動作句柄
              tooltip: '<b>Add Feed</b><br/>Button with tooltip'                        //工具條內容
          });            
            
            layout.add('west', new Ext.ContentPanel('feeds', {title: 'My Feeds', fitToFrame:true, toolbar: feedtb, resizeEl:'myfeeds-body'}));
            layout.add('east', new Ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));
            
            // the inner layout houses the grid panel and the preview panel
            var innerLayout = new Ext.BorderLayout('main', {
                south: {
                    split:true,
                    initialSize: 250,
                    minSize: 100,
                    maxSize: 400,
                    autoScroll:false,
                    collapsible:true,
                    titlebar: true,
                    animate: true,
                    cmargins: {top:2,bottom:0,right:0,left:0}
                },
                center: {
                    autoScroll:false,
                    titlebar:false
                }
            });
            // add the nested layout
            feedPanel = new Ext.NestedLayoutPanel(innerLayout, 'View Feed');
            layout.add('center', feedPanel);
            
            innerLayout.beginUpdate();
            
            var lv = innerLayout.add('center', new Ext.ContentPanel('feed-grid', {title: 'Feed Articles', fitToFrame:true}));
            this.createView(lv.getEl());
            
            // create the preview panel and toolbar
            previewBody = Ext.get('preview-body');
            var tb = new Ext.Toolbar('preview-tb');
            
            tb.addButton({text: 'View in New Tab',icon: 'images/new_tab.gif',cls: 'x-btn-text-icon', handler: this.showInTab.createDelegate(this)});
            tb.addSeparator();
            tb.addButton({text: 'View in New Window',icon: 'images/new_window.gif',cls: 'x-btn-text-icon', handler: this.showInWindow.createDelegate(this)});
            
            preview = new Ext.ContentPanel('preview', {title: "review", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
            innerLayout.add('south', preview);
            
            // restore innerLayout state
            innerLayout.restoreState();
            innerLayout.endUpdate(true);
            
            // restore any state information
            layout.restoreState();
            layout.endUpdate();




MENU的使用
/*
* Ext JS Library 1.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){
    Ext.QuickTips.init();

    // Menus can be prebuilt and passed by reference
    var dateMenu = new Ext.menu.DateMenu({                                                        //Menu的引用函數(shù)
        handler : function(dp, date){
            Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
        }
    });

    // Menus can be prebuilt and passed by reference
    var colorMenu = new Ext.menu.ColorMenu({
        handler : function(cm, color){
            Ext.example.msg('Color Selected', 'You chose {0}.', color);
        }
    });

    var menu = new Ext.menu.Menu({                                                                //創(chuàng)建一個菜單引用
        id: 'mainMenu',
        items: [
            new Ext.menu.CheckItem({
                text: 'I like Ext',
                checked: true,
                checkHandler: onItemCheck
            }),
            new Ext.menu.CheckItem({
                text: 'Ext for jQuery',
                checked: true,
                checkHandler: onItemCheck
            }),
            new Ext.menu.CheckItem({
                text: 'I donated!',
                checked:false,
                checkHandler: onItemCheck
            }), '-', {
                text: 'Radio Options',
                menu: {        // <-- submenu by nested config object
                    items: [
                        // stick any markup in a menu
                        '<b class="menu-title">Choose a Theme</b>',
                        new Ext.menu.CheckItem({
                            text: 'Aero Glass',
                            checked: true,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Vista Black',
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Gray Theme',
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Default Theme',
                            group: 'theme',
                            checkHandler: onItemCheck
                        })
                    ]
                }
            },{
                text: 'Choose a Date',
                cls: 'calendar',
                menu: dateMenu // <-- submenu by reference                        引用日期子菜單
            },{
                text: 'Choose a Color',
                menu: colorMenu // <-- submenu by reference                        引用顏色子菜單
            }
        ]
    });

    var tb = new Ext.Toolbar('toolbar');                                        //創(chuàng)建工具bar 綁定到元素toolbar                                                       
    tb.add({
            cls: 'x-btn-text-icon bmenu', // icon and text class
            text:'Button w/ Menu',
            menu: menu  // assign menu by instance
        },
        new Ext.Toolbar.MenuButton({
            text: 'Split Button',
            handler: onButtonClick,
            tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
            cls: 'x-btn-text-icon blist',
            // Menus can be built/referenced by using nested menu config objects
            menu : {items: [
                        {text: '<b>Bold</b>', handler: onItemClick},
                        {text: '<i>Italic</i>', handler: onItemClick},
                        {text: '<u>Underline</u>', handler: onItemClick}, '-',{
                        text: 'Pick a Color', handler: onItemClick, menu: {
                        items: [
                                new Ext.menu.ColorItem({selectHandler:function(cp, color){
                                    Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                }}), '-',
                                {text:'More Colors...', handlernItemClick}
                        ]
                    }},
                    {text: 'Extellent!', handler: onItemClick}
                ]}
        }), '-', {
        text: 'Toggle Me',
        enableToggle: true,
        toggleHandler: onItemToggle,
        pressed: true
    });

    menu.addSeparator();
    // Menus have a rich api for
    // adding and removing elements dynamically
    var item = menu.add({
        text: 'Dynamically added Item'
    });
    // items support full Observable API
    item.on('click', onItemClick);

    // items can easily be looked up
    menu.add({
        text: 'Disabled Item',
        id: 'disableMe'  // <-- Items can also have an id for easy lookup
        // disabled: true   <-- allowed but for sake of example we use long way below
    });
    // access items by id or index
    menu.items.get('disableMe').disable();

    // They can also be referenced by id in or components
    tb.add('-', {
        icon: 'list-items.gif', // icons can also be specified inline
        cls: 'x-btn-icon',
        tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
    }, '-');

    // add a combobox to the toolbar
    var store = new Ext.data.SimpleStore({
        fields: ['abbr', 'state'],
        data : Ext.exampledata.states // from states.js
    });
    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'state',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        width:135
    });
    tb.addField(combo);

    // functions to display feedback
    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
    }

    function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }

    function onItemCheck(item, checked){
        Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    }

    function onItemToggle(item, pressed){
        Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
    }
});





tab使用方法

        <div></div>

    var tabs = new Ext.TabPanel('tab-panel1', {
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 20,
        preferredTabWidth:150
    });

    tabs.addTab('root-tab', 'Home Tab');
    tabs.activate(0);

    var content = Ext.getDom('content').innerHTML; // bogus markup for tabs
    var index = 0;
    Ext.get('add-link').on('click', function(){
        tabs.addTab(
             Ext.id(),
             'New Tab ' + (++index),
             'Tab Body ' + index + content,
             true
        );
    });




獲得grid中數(shù)據(jù)的方法 randerer:function (a,b,c,d){
        alert(a);
}


js中的for in 語法可以獲得變量名稱和值或函數(shù)名稱和函數(shù)體
for(var key in obj){
        alert(obj[key]);
}


下一步 往回寫數(shù)據(jù) ，更新數(shù)據(jù)表格。
        當點擊某個數(shù)據(jù)的時候下面的修改工具欄自動彈出，用戶修改完畢后點擊保存，就更新數(shù)據(jù)并顯示出來
        上端使用工具條來完成。點擊搜索圖標后顯示出浮動框，輸入搜索內容后點擊搜索就可以過濾出有效數(shù)據(jù)。




menu使用方法
var tb = new Ext.Toolbar('toolbar');        設定使用工具條的div
tb.add(
                                                        {
                                                        cls: 'x-btn-text-icon bmenu', // icon and text class
                                                        text:'添加新語料'
                                                        },{
                                                        cls: 'x-btn-text-icon bmenu', // icon and text class
                                                        text:'檢索'
                                                        }
);


引用元素的方法
Ext.get('元素id')



快速更新元素內容
statusPanel.setContent('Loading feed ' + feed + '...');


取消元素樣式
        YAHOO.util.Dom.removeClass(suggested.dom.getElementsByTagName('a'), 'selected');
        取消所有suggested元素中的a上的select樣式

添加元素樣式
        YAHOO.util.Dom.addClass('feed-'+feedId, 'selected');
        為標簽為'feed-'+feedId的元素添加selected樣式


更新數(shù)據(jù)表格中的數(shù)據(jù)
        ds = new Ext.data.Store({
                                        proxy: new Ext.data.ScriptTagProxy({url:'data.php'}),
                                        reader: new Ext.data.JsonReader({root:'results',totalProperty: 'total',id: 'id'}, [
                       
                                                {name: 'price', mapping:'price'},
                                                {name: 'change', mapping:'change'},
                                                {name: 'pctChange', mapping:'pctChange'}
                                        ])
                                });

        ds.load({params:{start:0, limit:25}});




grid的更新
在ScriptTagProxy后的url參數(shù)中間傳遞參數(shù)導致程序出錯，看來要試試在參數(shù)變量中添加參數(shù)

剛才的參數(shù)錯誤是因為 php中計算$rows行數(shù)的變量沒有在全局狀態(tài)下導致的，
grid的參數(shù)傳遞可以通過 url:mm.htm?sss=sss方法傳遞。也只有這樣能夠支持翻頁



備注：使用臨時表可以解決普通grid中使用復雜查詢的問題



Ext.form.Form.                        top.column(
                                {width:232}, // precise column sizes or percentages or straight CSS
                                new Ext.form.TextField({
                                        fieldLabel: 'First Name',
                                        name: 'first',
                                        width:200
                                }),
               
                                new Ext.form.TextField({
                                        fieldLabel: 'Company',
                                        name: 'company',
                                        width:200
                                })
                        );
添加到div中輸入框





2. 定義 fileUpload:true 表示表單可上傳文件
-------------------------------------
form = new Ext.Form({
        labelAlign: 'right',
        labelWidth: 75,
        buttonAlign: 'right',
        url:'addr.php',
        fileUpload:true,
        baseParams:{module:'login'}
});
-------------------------------------













重要：所有動態(tài)生成的表單中的內容都可以通過
Ext.get('user').dom.value = a.result.level; 來添加


Form.clomn 提交數(shù)據(jù)時抱錯。。問題還沒找到。


對于表單元素設定其可用狀態(tài) 使用disabled屬性控制
new Ext.form.TextField({fieldLabel:'ID',name: 'ID',id:'ID',disabled:true})


新文檔中的Public Properties是所有元素都可以共用的屬性


布局中動態(tài)加入一個tab非常方便
直接在BorderLayon.add()中添加就可以了


創(chuàng)建表單有兩種方法，一種是動態(tài)生成 一種是渲染當前HTML元素


使用grid的分頁工具條上添加按鈕用
                                paging.add('-', {
                                        pressed: false,
                                        enableToggle:true,
                                        text: '取消選擇',
                                        cls: 'details',
                                        id: 'ClearSelections',
                                        disabled: true,
                                        toggleHandler: function(){
                                        //        obj.grid.getSelectionModel().clearSelections();
                                        //        _ActiveBtn.apply(obj);//注意和上面的_ActiveBtn.apply(this)不同;當前的作用域已經(jīng)"脫離order
                                        }
                                });


當頁面中出現(xiàn)兩個iframe后 grid的豎欄拖動出現(xiàn)bug.拖動橫欄后發(fā)現(xiàn)數(shù)據(jù)層沒有跟著聯(lián)動
iframe中有




三態(tài)工具條按鈕
{cls: 'x-btn-text-icon bmenu', // icon and text class
text:'全部',
enableToggle: true,
toggleHandler:function (){
//更新為全部數(shù)據(jù)
        ds.baseParams = {act:_manageData};
        ds.load({params:{ start:0, limit:30}});}       
}

兩態(tài)工具條按鈕
{cls: 'x-btn-text-icon bmenu', // icon and text class
text:'全部',
enableToggle: false,
handler:function (){}
}


創(chuàng)建表單單選元素使用
group屬性來確定組



下面的方法可以控制布局區(qū)域的隱藏和顯示。
可以通過定義一個開關來實現(xiàn) 開啟關閉的動作
innerLayout.getRegion("south").collapse() ;
innerLayout.getRegion("south").expand();


4修改布局上的title
outLayout.getRegion('west').titleTextEl.innerHTML = bt.name;


獲得工具欄中元素引用的方法
paging.items.get('DeleteSelections').hide();


刷新grid布局
handler: function (){manageGrid.getView().refresh()}


獲取布局隱藏事件并更新其他布局中grid的方法
                        var westRegion = outLayout.getRegion('west');
                        westRegion.on('invalidated',onWestRegionCollapsed);
                        function onWestRegionCollapsed (){
                                        manageGrid.getView().refresh();
                        }



JSON中的數(shù)據(jù)不能有換行 否則會出錯



        /*
        數(shù)據(jù)庫中讀取的字符串應該
        ereg_replace("\r|\n", "",addslashes(htmlspecialchars($val->Source)))
        將影響HTML顯示的內容編碼成HTML編碼
        轉義其中的特殊字符
        去除行
       
        */

數(shù)據(jù)寫入時候       
1 編碼 應該轉換成數(shù)據(jù)庫能夠接收的編碼
2 標簽