tabpanescreen.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

DemoApp.TabPaneScreen = Core.extend(Echo.ContentPane, {

    _msg: null,
    _tabPane: null,
    _activeTabBorder: null,
    _activeTabBackground: null,
    _activeTabBackgroundImage: null,
    _activeTabForeground: null,
    _inactiveTabBorder: null,
    _inactiveTabBackground: null,
    _inactiveTabBackgroundImage: null,
    _inactiveTabForeground: null,
    _addButton: null,
    _removeButton: null,
    _tabCount: 3,

    $construct: function() {
        this._msg = DemoApp.getMessages(null);
        Echo.ContentPane.call(this, {
            children: [
                new Echo.SplitPane({
                    styleName: "DefaultResizableLarge",
                    orientation: Echo.SplitPane.ORIENTATION_HORIZONTAL_TRAILING_LEADING,
                    separatorPosition: 170,
                    children: [
                        new Echo.Column({
                            layoutData: {
                                background: "#c7d0f4"
                            },
                            insets: "10px 15px",
                            cellSpacing: 10,
                            children: [
                                new Echo.Label({
                                    text: this._msg["TabPaneScreen.Description.1"]
                                }),
                                new Echo.Label({
                                    text: this._msg["TabPaneScreen.Description.2"]
                                })
                            ]
                        }),
                        this._tabPane = new Extras.TabPane({
                            layoutData: {
                                backgroundImage: "image/bgpictures/Coral.jpg"
                            },
                            insets: 20,
                            tabActiveBorder: "2px groove #3bb467",
                            tabInactiveBorder: "2px groove #819488",
                            borderType: Extras.TabPane.BORDER_TYPE_SURROUND,
                            tabInset: 30,
                            tabActiveBackground: "#ffffff",
                            background: "#ffffff",
                            tabInactiveBackgroundImage: "image/LightBlueLineBackground.png",
                            children: [
                                new Echo.Column({
                                    layoutData: {
                                        title: this._msg["TabPaneScreen.ConfiguratorTab"]
                                    },
                                    insets: "10px 20px",
                                    cellSpacing: 10,
                                    children: [
                                        new Echo.Grid({
                                            width: "100%",
                                            insets: "5px 10px",
                                            border: "2px groove #c5ae69",
                                            size: 4,
                                            children: [
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0dcbb"
                                                    }
                                                }),
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0ecbb"
                                                    },
                                                    text: this._msg["TabPaneScreen.PromptForeground"]
                                                }),
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0ecbb"
                                                    },
                                                    text: this._msg["TabPaneScreen.PromptBackground"]
                                                }),
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0ecbb"
                                                    },
                                                    text: this._msg["TabPaneScreen.PromptBorder"]
                                                }),
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0d6c1",
                                                        alignment: "trailing"
                                                    },
                                                    text: this._msg["TabPaneScreen.PromptActiveTab"]
                                                }),
                                                this._activeTabForeground = new Extras.ColorSelect({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    styleName: "Junior"
                                                }),
                                                new Echo.Column({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    children: [
                                                        this._activeTabBackground = new Extras.ColorSelect({
                                                            styleName: "Junior"
                                                        }),
                                                        this._activeTabBackgroundImage = new Echo.CheckBox({
                                                            text: "Image"
                                                        })
                                                    ]
                                                }),
                                                this._activeTabBorder = new Extras.ColorSelect({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    styleName: "Junior"
                                                }),
                                                new Echo.Label({
                                                    layoutData: {
                                                        background: "#f0d6c1",
                                                        alignment: "trailing"
                                                    },
                                                    text: this._msg["TabPaneScreen.PromptInactiveTab"]
                                                }),
                                                this._inactiveTabForeground = new Extras.ColorSelect({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    styleName: "Junior"
                                                }),
                                                new Echo.Column({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    children: [
                                                        this._inactiveTabBackground = new Extras.ColorSelect({
                                                            styleName: "Junior"
                                                        }),
                                                        this._inactiveTabBackgroundImage = new Echo.CheckBox({
                                                            text: "Image"
                                                        })
                                                    ]
                                                }),
                                                this._inactiveTabBorder = new Extras.ColorSelect({
                                                    layoutData: {
                                                        alignment: "top"
                                                    },
                                                    styleName: "Junior"
                                                })
                                            ]
                                        }),
                                        new Echo.Column({
                                            children: [
                                                this._addButton = new Echo.Button({
                                                    styleName: "Default",
                                                    text: this._msg["TabPaneScreen.AddTab"],
                                                    icon: "image/Icon24Yes.gif",
                                                    events: {
                                                        action: Core.method(this, this._processAddTab)
                                                    }
                                                }),
                                                this._removeButton = new Echo.Button({
                                                    styleName: "Default",
                                                    text: this._msg["TabPaneScreen.RemoveTab"],
                                                    icon: "image/Icon24No.gif",
                                                    events: {
                                                        action: Core.method(this, this._processRemoveTab)
                                                    }
                                                }),
                                                new Echo.Button({
                                                    styleName: "Default",
                                                    text: this._msg["TabPaneScreen.Update"],
                                                    icon: "image/Icon24Refresh.gif",
                                                    events: {
                                                        action: Core.method(this, this._processUpdateTabPane)
                                                    }
                                                })
                                            ]
                                        })