是否有javascript函数向Gnome扩展小程序添加通用文本框？

我正在以Gnome扩展的形式为Ubuntu创建一个指示器小程序。我正在使用javascript（我没有太多的经验）

目标是在面板中有一个图标，点击后只会弹出一个小窗口（像菜单一样连接到面板），其中有一个文本框，允许用户输入文本（待办事项列表、随机想法等）。再次单击图标将删除窗口等。在闭会期间需要保留案文

我的问题（除了在构造Gnome小程序时找到很少的资源外）是，我不知道创建文本框的功能是什么。

我试过查看各种可用的St.Widget，但找不到合适的

使用下面的代码，我可以生成图标，将其放置在面板中，并在单击时创建一个弹出菜单（以及一些测试通知以尝试功能）。但是，我无法创建文本输入框

const Main = imports.ui.main;
const PanelMenu = imports.ui.panelMenu;
const PopupMenu = imports.ui.popupMenu;
const St = imports.gi.St;
const Lang = imports.lang;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);

            let Icon = new St.Icon({icon_name: 'accessories-text-editor-symbolic', style_class: 'system-status-icon'});          

            this.actor.add_child(Icon);

            let menuItem = new PopupMenu.PopupMenuItem('Show a notification?');
            menuItem.actor.connect('button-press-event', function(){ Main.notify('Notification', 'Hello World !') });

            let switchItem = new PopupMenu.PopupSwitchMenuItem("Show another notification?");
            switchItem.connect("toggled", function(){ Main.notify('Notification', 'Hello World !') });

            this.menu.addMenuItem(menuItem);
            this.menu.addMenuItem(switchItem);

        //Create generic text input box.

        }
});

function init() {
    log ('Extension initalized');
};

function enable() {
    log ('Extension enabled');

    let _indicator =  new Notes_Indicator();
    Main.panel._addToPanelBox('Notes', _indicator, 1, Main.panel._rightBox);
};

function disable(){
    log ('Extension disabled');
    indicator.destroy();
};

---

如果您能帮助确定文本框使用的最佳功能/小部件/代码，我们将不胜感激，甚至可以帮助您找到有助于回答我问题的合适文档。谢谢

有点旧，但由于文档太少，仍然值得回答

您可以使用如下的St.标签：

// ...
const St = imports.gi.St;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);
            // ...
            this.textBox = St.Label({
                text: 'My Text',
            })
            this.actor.add_actor(this.textBox);

            // You can change the text doing
            this.textBox.set_text('My New Text');
            // ...
        }
});
// ...

请注意，如果您计划同时使用图标和文本，则需要将它们包装在一个BoxLayout中，我通过艰难的方式了解到了这一点

// ...
const St = imports.gi.St;

const Notes_Indicator = new Lang.Class({
    Name: 'Notes.indicator',
    Extends: PanelMenu.Button   ,

        _init: function(){
            this.parent(0.0);
            // ...

            // Main layout
            this.box = new St.BoxLayout();
            this.actor.add_actor(this.box);
            // Text box
            this.textBox = St.Label({
                text: 'My Text',
            })
            this.box.add(this.textBox);

            this.icon = new St.Icon({icon_name: 'accessories-text-editor-symbolic', style_class: 'system-status-icon'});
            this.box.add(this.icon);

        }
});
// ...