热销汽车

Ext.Net学习笔记03:Ext.Net MessageBus用法

作者:永利网址    发布时间:2020-01-03 22:26     浏览次数 :136

[返回]

TechWeb报道10月12日消息,特斯拉CEO马斯克(Elon Musk)周末发布Twitter消息称,将于本周四发布最新款车载操作系统Version 7,具有部分自动驾驶功能。(Autopilot)

发布和订阅消息

Ext.Net MessageBus 的本质是一个消息订阅机制,ExtJS中没有这种机制,所以MessageBus的Ext.Net实现的,但并不是原创,这种功能在dojo中早就实现了,可以参见我的博客:Dojo入门:dojo中的事件处理

下面的代码将演示如何使用 MessageBus 发布和订阅消息:

<ext:Button runat="server" ID="btn2" Text="发布消息" Handler="fnButtonHandler"></ext:Button>

永利网址,首先定义了一个按钮,这个按钮单击的时候将会执行fnButtonHandler方法,我们在这个方法中发布消息:

function fnButtonHandler() {
    Ext.net.Bus.publish(

"Custom.Event1", { item: this

});
}

Ext.net.Bus.publish方法的第一个参数是消息名称,第二个参数是消息的参数。

接下来我们来订阅这个消息:

Ext.onReady(function () {
    Ext.net.Bus.subscribe(

"Custom.*", function

() {
        console.log(arguments);
    });
});

在onReady事件中,添加对消息Custom.*的订阅,这里使用了通配符,表示订阅Custom.开头的所有消息。

代码完成以后,我们来刷新页面,然后点击按钮,这个时候控制台显示如下:

永利网址 1

这是我们通过代码来实现的消息发布和订阅,除此之外,Ext.Net还允许通过控件来发布和订阅消息。

永利网址 2

通过控件发布和订阅消息

我这里通过一个现成的例子来演示:

<ext:Panel ID="Panel1"
    runat="server"
    Title="MessageBus Event Logger"
    Width="400"
    Height="300"
    AutoScroll="true">
    <MessageBusListeners>
        <ext:MessageBusListener
            Name="App.*"
            Handler="this.body.createChild({
            html: 'Received event from ' + data.item.id,
            tag: 'p'
            });" />
    </MessageBusListeners>
    <Buttons>
        <ext:Button ID="Button1" runat="server" Text="Publish event 1">
            <Listeners>
                <Click BroadcastOnBus="App.event1" />
            </Listeners>
        </ext:Button>
    </Buttons>
</ext:Panel>

在这段代码中,我们通过按钮的click事件来发布消息,控件panel则订阅了这个消息,效果如下:

永利网址 3