ExtJs 備忘錄（8）—— 管理界面搭建和其他部分控件介紹

正文

　　一、管理界面[TreePanel、Viewport、layout-browser]

　　　　8.1.aspx

　　　　1.1　　效果截圖

1.2　　實作代碼

        //标簽頁

        var tabs = new Ext.TabPanel({

            region: 'center',

            deferredRender: false,

            margins: '0 5 5 0',

            activeTab: 0,

            defaults: {

                closable: true,

                autoScroll: true

            },

            items: [{

                title: '首頁',

                html: '<b>歡迎您登陸系統</b>'

            }]

        });

        Ext.onReady(function() {

            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

            function createTree(iText) {

                return new Ext.tree.TreePanel({

                    autoScroll: true,

                    animate: true,

                    border: false,

                    rootVisible: false,

                    root: new Ext.tree.TreeNode({

                        text: iText,

                        draggable: false,

                        expanded: true

                    })

                });

            }

            function appendTreeNode(tree, tnId, iText, iUrl) {

                tree.root.appendChild(new Ext.tree.TreeNode({

                    id: tnId,

                    text: iText,

                    listeners: {

                        'click': function(node, event) {

                            event.stopEvent();

                            var n = tabs.getComponent(node.id);

                            if (!n) { ////判斷是否已經打開該面闆   

                                n = tabs.add({

                                    'id': node.id,

                                    'title': node.text,

                                    html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + iUrl + '"></iframe>'

                                    //<div id="loading" style="font-size:8pt">正在加載...</div>

                                    //autoLoad:{url:iUrl, scripts:true} //通過autoLoad屬性載入目标頁,如果要用到腳本,必須加上scripts屬性   

                                });

                            }

                            tabs.setActiveTab(n);

                        }

                    }

                }));

            //人員管理

            var daTree = createTree("人員管理");

            appendTreeNode(daTree, "da1", "錄入1", "/esayadd.aspx");

            appendTreeNode(daTree, "da2", "錄入2", "/esayadd.aspx");

            appendTreeNode(daTree, "da3", "錄入3", "/esayadd.aspx");

            appendTreeNode(daTree, "da4", "錄入4", "/esayadd.aspx");

            //稽核管理

            var shTree = createTree("自我管理");

            appendTreeNode(shTree, "sh1", "錄入1", "/esayadd.aspx");

            appendTreeNode(shTree, "sh2", "錄入2", "/esayadd.aspx");

            var viewport = new Ext.Viewport({

                layout: 'border',

                items: [

                //頂欄

                new Ext.BoxComponent({

                    region: 'north',

                    margins: '0 5 0 5',

                    el: 'north'

                }), {

                    region: 'west',

                    id: 'west-panel',

                    title: '系統導航',

                    split: true,

                    width: 200,

                    minSize: 175,

                    maxSize: 400,

                    collapsible: true,

                    margins: '5 0 5 5',

                    layout: 'accordion',

                    layoutConfig: {

                        animate: true

                    },

                    defaults: { border: false },

                    items: [{

                            title: "人員管理",

                            items: [daTree]

                        }, {

                            title: '自我管理',

                            items: [shTree]

                        }]

                    }, 

                    tabs

                    ]

　　　　代碼說明：

　　　　　　a).　　這裡封裝了樹形控件的建立和節點添加

　　二、其他控件

　　　　8.2.aspx

　　　　2.1　　先來張大合照

　2.2　　實作代碼

　　　　　　2.2.1　　下拉框、菜單[CycleButton、SplitButton]

            var btn = new Ext.CycleButton({

                showText: true,

                prependText: 'View as ',

                items: [{

                    text:'text only',

                    iconCls:'view-text',

                    checked:true

                },{

                    text:'HTML',

                    iconCls:'view-html'

                }],

                changeHandler:function(btn, item){

                    Ext.Msg.alert('Change View', item.text);

                }

            });

            //二級菜單

            var sb = new Ext.SplitButton({

                   text: '二級菜單',

                   menu: new Ext.menu.Menu({

                        text: 'Item 1',

                        menu:new Ext.menu.Menu({

                            items: [

                                {text: 'Item 3'},

                                {text: 'Item 4'}

                            ]

                           })

                    }]

                   })

　　　　　　2.2.2　　調色闆[ColorPalette] 

            //調色闆

            var cp = new Ext.ColorPalette({

                value:'993300',       //預設值

                listeners: {

                    'select':function(palette, selColor){

                        Ext.Msg.alert('顔色', selColor);

            });  

　　　　　　2.2.3　　滑動條[Slider] 

            //滑動條

           var slider = new Ext.Slider({

                width: 200,

                value: 50,

                increment: 10,

                minValue: 0,

                maxValue: 100

 　　　　　　2.2.4　　月曆[DatePicker]

new Ext.DatePicker()

　　三、下載下傳

　　四、相關文章索引

結束語

　　寫完這篇關于關于Ext控件基本上就告一段落了，随着版本的更新會慢慢的不斷新增更多的控件，如果再在項目中使用Ext的話，再考慮寫續了 :)

本文轉自over140 51CTO部落格，原文連結：http://blog.51cto.com/over140/586535，如需轉載請自行聯系原作者