学习一下EXT 作了些笔记【摘要】

【摘要】
学习一下EXT 作了些笔记


文档载入结束 初始化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>


【全文】
学习一下EXT 作了些笔记


文档载入结束 初始化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',                //引发动作？
                                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"标签环绕，但是同一个标签中可以包含多个表单元素





对话框的使用
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);        //关键点在于回调函数
    });
   
    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,                        //回调函数
           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...');        //更新进度条状态 参数为状态图和状态文字
                }
           };
       };
       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" />                //由这个按钮触发


        对话框内的内容
    <!-- 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        对话框之创建一次
                dialog = new Ext.LayoutDialog("hello-dlg", {                        设定对话框句柄        第一个参数表示所要引用的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, {        //参数为应用面板的根元素        边框布局
                            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}));        //为布局添加内部元素        内容面板         参数为适合结构
                        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();


布局的使用方法是 先创建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();
               

关键点在于对页面上存在的一些元素的引用

对象传递参数的方法是 {属性:'值',属性:'值'}

布局时候使用在边上的参数可以是
                                split:true,                        //分割线，可以允许拖动
                                initialSize: 202,
                                minSize: 175,
                                maxSize: 400,                       
                                titlebar: true,                        //工具条，包括关闭按钮 和标签页的头信息显示
                                collapsible: false,                //可以缩进
                                animate: false                        //缩进时使用动画

                在中间的参数
                                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');                                //布局的获得区域方法
            south.add(statusPanel);                                        //在区域中添加内容的方法
           
            // create the add feed toolbar
            var feedtb = new Ext.Toolbar('myfeeds-tb');                        //创建了一个工具栏引用
            // 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.
* [e-mail]
*
* 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的引用函数
        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({                                                                //创建一个菜单引用
        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');                                        //创建工具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中数据的方法 randerer:function (a,b,c,d){
        alert(a);
}


js中的for in 语法可以获得变量名称和值或函数名称和函数体
for(var key in obj){
        alert(obj[key]);
}


下一步 往回写数据 ，更新数据表格。
        当点击某个数据的时候下面的修改工具栏自动弹出，用户修改完毕后点击保存，就更新数据并显示出来
        上端使用工具条来完成。点击搜索图标后显示出浮动框，输入搜索内容后点击搜索就可以过滤出有效数据。




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样式


更新数据表格中的数据
        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参数中间传递参数导致程序出错，看来要试试在参数变量中添加参数

刚才的参数错误是因为 php中计算$rows行数的变量没有在全局状态下导致的，
grid的参数传递可以通过 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'}
});
-------------------------------------













重要：所有动态生成的表单中的内容都可以通过
Ext.get('user').dom.value = a.result.level; 来添加


Form.clomn 提交数据时抱错。。问题还没找到。


对于表单元素设定其可用状态 使用disabled属性控制
new Ext.form.TextField({fieldLabel:'ID',name: 'ID',id:'ID',disabled:true})


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


布局中动态加入一个tab非常方便
直接在BorderLayon.add()中添加就可以了


创建表单有两种方法，一种是动态生成 一种是渲染当前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)不同;当前的作用域已经"脱离order
                                        }
                                });


当页面中出现两个iframe后 grid的竖栏拖动出现bug.拖动横栏后发现数据层没有跟着联动
iframe中有




三态工具条按钮
{cls: 'x-btn-text-icon bmenu', // icon and text class
text:'全部',
enableToggle: true,
toggleHandler:function (){
//更新为全部数据
        ds.baseParams = {act:_manageData};
        ds.load({params:{ start:0, limit:30}});}       
}

两态工具条按钮
{cls: 'x-btn-text-icon bmenu', // icon and text class
text:'全部',
enableToggle: false,
handler:function (){}
}


创建表单单选元素使用
group属性来确定组



下面的方法可以控制布局区域的隐藏和显示。
可以通过定义一个开关来实现 开启关闭的动作
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中的数据不能有换行 否则会出错



        /*
        数据库中读取的字符串应该
        ereg_replace("\r|\n", "",addslashes(htmlspecialchars($val->Source)))
        将影响HTML显示的内容编码成HTML编码
        转义其中的特殊字符
        去除行
       
        */

数据写入时候       
1 编码 应该转换成数据库能够接收的编码
2 标签