Menu

  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay
  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay

浅析ExtJS 4布局组件

15
Mar
2013

浅析ExtJS 4布局组件

By Alex
/ in JavaScript
/ tags ExtJS
0 Comments

在ExtJS中,布局决定组件的位置如何分布、尺寸如何确定。ExtJS 4对整个布局体系进行了改造,布局引擎被重新编写,提高了性能。

ExtJS 4中的布局

ExtJS 4把布局分为两类:

  1. 容器布局(Container Layout):组织一个组件的HTML元素。包括Border Layout、Hbox Layout、Vbox Layout、Fit Layout等
  2. 组件布局(Component Layout):决定容器中子组件的大小、位置。包括Dock Layout、Toolbar Layout、Field Layout、TriggerField Layout等
容器布局

在ExtJS 4中Auto Layout替换了ExtJS 3中的ContainerLayout,作为默认的容器布局类,如果容器没有指定布局,则自动使用Auto Layout。

Form Layout已经不再支持,并且由组件布局Field Layout(组件布局)代替。

容器布局的类层次如下图:

layout

Auto Layout

该布局的特点:

  1. 依据声明的顺序,子组件自上而下的排列
  2. 子组件需要显式声明宽高度
  3. 改变容器的大小后,子组件不跟随改变大小(即使子组件指定百分比)
  4. 如果容器的尺寸不够,子组件可能重叠在一起

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var w = Ext.create( 'Ext.window.Window', {
    title : 'Auto Layout',
    width : 200,
    height : 320,
    layout : 'auto',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        { title : 'Panel 1', html : 'Panel 1', height : 60, width : 100 },
        { title : 'Panel 2', html : 'Panel 2', height : 80, width : 60 },
        { title : 'Panel 3', html : 'Panel 3', height : 65, width : 100 },
        { title : 'Panel 4', html : 'Panel 4', height : 70, width : '90%'}
    ]
} );
w.show();

 效果图:

auto-layout

Anchor Layout

该布局的特点:

  1. 依据声明的顺序,子组件自上而下的排列
  2. 子组件依据自身指定的锚定规则(anchor配置项)来确定尺寸、位置
  3. 父容器大小变化后,子组件的大小自动变化

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var w = Ext.create( 'Ext.window.Window', {
    title : 'Auto Layout',
    width : 250,
    height : 300,
    layout :'anchor',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        //正数表示宽高度占有容器的百分比
        { title : 'Panel 1', html: '100% 30%', anchor : '100% 30%'},
        { title : 'Panel 2', html: '80% 25%',  anchor : '80% 25%'},
        //负数表示宽高度 = 容器宽高度 - abs(负数)
        { title : 'Panel 3', html: '-70 20%',  anchor : '-70 20%' },
        //如果指定x、y,则可以指定其相对于前一个兄弟组件的位置偏移
        { title : 'Panel 4', html: '-30 25%',  anchor : '-30 25%', x : 0, y :0}
    ]
} );
w.show();

效果图:

anchor-layout

Absolute Layout

该布局的特点:

  1. 该布局继承自Anchor Layout,具有其特点
  2. 子组件根据x、y设置,相对于父容器的body左上角进行绝对定位

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var w = Ext.create( 'Ext.window.Window', {
    title : 'Absolute Layout',
    width : 250,
    height : 300,
    layout :'absolute',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        { title : 'Panel 1', html: 'x: 10; y: 10 - anchor: 80% 80%', anchor:'80% 80%', x: 10, y: 10}
    ]
} );
w.show();

效果图:

absolute-layout

HBox Layout

该布局的特点:

  1. 子组件水平的分布在容器内
  2. 通过flex配置项,可以指定子组件如何划分水平方向的空白区域
  3. 通过pack配置项,可以指定子组件如何在水平方向连续分布,支持值:start、center、end
  4. 通过align配置项,可以决定子组件在垂直方向如何对齐(或伸展),支持值:stretch、stretchmax、top、middle

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//例一:
var w = Ext.create( 'Ext.window.Window', {
    title : 'Hbox Layout',
    width : 500,
    height : 250,
    layout :{
        type : 'hbox',
        /**
         * 对齐方式,决定了纵向的高度与位置:
         * stretch :自动伸展填满容器
         * stretchmax :自动伸展,使所有子组件与最大高度子组件同高
         * top :顶端对齐子组件(默认)
         * middle :中部对齐子组件
         */
        align : 'middle'
    },
  
    items : [
        //flex用于设置子组件占有容器可用宽度(除去固定宽度组件占用的部分)的比例
        { title : 'Panel 1', html : 'flex:1', flex : 2, height : 100},
        { title : 'Panel 2', html : 'flex:2', flex : 1, height : 80},
        //该组件为固定宽度
        { title : 'Panel 3', html : 'width:100', width : 100, height : '50%'}
    ]
} );
w.show();
//例二:
var w = Ext.create( 'Ext.window.Window', {
    title : 'Hbox Layout',
    width : 500,
    height : 250,
    layout :{
        type : 'hbox',
        /**
         * pack在任何一个子组件指定了flex时没有意义
         * start :靠左对齐
         * center :中间对齐
         * end :靠右对齐
         */
        pack : 'end',
        align : 'middle',
        //为所有子组件外围添加的补白
        padding : '0 50 0 50'
    },
  
    items : [
        { title : 'Panel 1', html : 'flex:1<br>height : 100', height : 100},
        { title : 'Panel 2', html : 'flex:2<br>height : 80', height : 80},
        { title : 'Panel 3', html : 'width:100<br>height : 150', width : 100, height : 150}
    ]
} );
w.show();

例一的效果图:hbox-layout

例二的效果图:hbox-layout-2

VBox Layout

该布局的特点与Hbox非常类似,只是在排列方向上不同:

  1. 子组件垂直的分布在容器内
  2. 通过flex配置项,可以指定子组件如何划分水平方向的空白区域
  3. 通过pack配置项,可以指定子组件如何在垂直方向连续分布,支持值:start、center、end
  4. 通过align配置项,可以决定子组件在水平方向如何对齐(或伸展),支持值:stretch、stretchmax、left、center

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var w = Ext.create( 'Ext.window.Window', {
    title : 'Vbox Layout',
    width : 250,
    height : 500,
    layout :{
        type : 'vbox',
        pack : 'end',
        align : 'center'
    },
  
    items : [
        { title : 'Panel 1', html : 'width:100,height:100',width:100, height : 100},
        { title : 'Panel 2', html : 'width:150,height:150',width:150, height : 150},
        { title : 'Panel 3', html : 'width:120,height:120', width : 120, height : 120}
    ]
} );
w.show();

效果图:vbox-layout

Accordion Layout

该布局是Vbox布局的子类,其特点为:

  1. 每次只显示一个子组件
  2. 可以展开某个处于收缩状态的子组件

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var w = Ext.create( 'Ext.window.Window', {
    title : 'Accordion Layout',
    width : 200,
    height : 400,
    layout : 'accordion',
    items : [
        { title : 'Panel 1', html : 'Panel 1', height : 100},
        { title : 'Panel 2', html : 'Panel 2', height : 100},
        { title : 'Panel 3', html : 'Panel 3', height : 100}
    ]
} );
w.show();

效果图:accordion-layout

Table Layout

该布局的特点:

  1. 把组件渲染到HTML的table元素内部
  2. 可以指定某个子组件跨越的行、列数

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    var table = Ext.create( 'Ext.window.Window', {
        title : 'Table Layout',
        width : 400,
        height : 300,
        layout : {
            type : 'table',
            columns : 3,  //表格包含的列数
            tableAttrs : {  //应用到生成的table元素的属性
                style : {
                    width : '90%',
                    height : '100%'
                }
            }
        },
        defaults : {
            bodyStyle : 'padding:10px'
        },
        items : [
            {
                html : 'Cell 1',
                rowspan : 3    //跨越3行
            }, {
                html : 'Cell 2'
            }, {
                html : 'Cell 3'
            }, {
                html : 'Cell 4'
            }, {
                html : 'Cell 5'
            }, {
                html : 'Cell 6',
                colspan : 2   //跨越2列
            }, {
                html : 'Cell 7'
            }, {
                html : 'Cell 8'
            }, {
                html : 'Cell 9'
            }
        ]
    } );
    table.show();

效果图:table-layout

Column Layout

该布局的特点:

  1. 子组件水平分布
  2. 容器管理子组件的宽度,可以通过columnWidth来指定宽度
  3. 通常用于GridPanel的列的布局

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var w = Ext.create( 'Ext.window.Window', {
    title : 'Accordion Layout',
    width : 400,
    height : 100,
    layout : 'column',
    items : [
        { title : 'Panel 1', html : '.25', columnWidth: .25},
        { title : 'Panel 2', html : '.25', columnWidth: .25},
        { title : 'Panel 3', html : '1/2', columnWidth: 1/2}
    ]
} );
w.show();

效果图:column-layout

Fit Layout

该布局的特点:

  1. 容器只能有唯一的子组件
  2. 该组件充满容器的全部可用空间

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
var w = Ext.create( 'Ext.window.Window', {
    title : 'Fit Layout',
    width : 300,
    height : 350,
    layout : 'fit',
    items : [
        { title : 'Panel 1', html : 'Fit'}
    ]
} );
w.show();

效果图:fit-layout

Card Layout

该布局是Fit Layout的子类型,特点为:

  1. 与Fit Layout类似,每次只能显示一个子组件
  2. 可以配置多个子组件
  3. 可以切换子组件的显示

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function navHandler( btn )
{
    var activeItem = card.layout.activeItem; //获取当前激活的子组件
    var active = card.items.indexOf( activeItem );
    if ( btn.id == 'nextButton' ) active += 1;
    else if ( btn.id == 'prevButton' ) active -= 1;
    card.layout.setActiveItem( active ); //通过序号激活子组件
    var prev = card.dockedItems.items[1].items.items[0];
    var next = card.dockedItems.items[1].items.items[2];
    if ( active == 0 ) prev.setDisabled( true );
    else if ( active == 1 )
    {
        prev.setDisabled( false );
        next.setDisabled( false );
    }
    else if ( active == 2 ) next.setDisabled( true );
};
var card = Ext.create( 'Ext.window.Window', {
    title : 'Card Layout',
    width : 350,
    height : 200,
    layout : 'card',
    activeItem : 0,
    defaults : {
        border : false
    },
    bbar : [
        {
            id : 'prevButton',
            text : 'Preivous Step',
            handler : navHandler,
            disabled : true
        }, '->', //该记号用于占满多余的空间
        {
            id : 'nextButton',
            text : 'Next Step',
            handler : navHandler
        }
    ],
    items : [
        {
            html : 'Step 1 of 3'
        }, {
            html : 'Step 2 of 3'
        }, {
            html : 'Step 3 of 3'
        }
    ]
} );
card.show();

效果图:card-layout

Border Layout

该布局的特点:

把容器划分为东西南北中五个区域:

  1. 最多有五个子组件,最少一个子组件,中间区域必不可少
  2. 每个子组件需要指定其占据的区域(region)
  3. 除了中间区域,其他区域可以收缩
  4. 南北区域可以指定高度,东西区域可以指定宽度,剩余的区域由中间占有

该布局的示意图如下:border-layout-0

代码示例:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var border = Ext.create( 'Ext.window.Window', {
    width : 700,
    height : 500,
    title : 'Border Layout',
    layout : 'border',
    defaults : {
        xtype : 'panel'
    },
    items : [
        {
            title : 'North Region is resizable',
            region : 'north', //子组件占据的区域
            height : 100,  //南北区域可以指定高度
            split : true
        }, {
            title : 'South Region is resizable',
            region : 'south',
            height : 100,
            split : true
        }, {
            title : 'West Region is collapsible',
            region : 'west',
            width : 200,  //东西区域可以指定宽度
            collapsible : true,
            layout : 'fit'
        }, {
            title : 'East Region is collapsible',
            region : 'east',
            width : 200,
            collapsible : true,
            layout : 'fit'
        }, {
            //剩余空间全部归中间区域
            title : 'Center Region',
            region : 'center',
            layout : 'fit'
        }
    ]
} );

效果图:border-layout

组件布局

与容器布局不同,组件布局关注组件内部结构(而不是容器的子组件)组成的大小、位置。

Dock Layout

Dock Layout主要用于提高面板头(Header)、工具栏(Toolbar)的灵活性。

考虑以下包含了若干工具栏配置的面板:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Ext.create( 'Ext.panel.Panel', {
    collapsible : true,
    width : 400,
    renderTo : Ext.getBody(),
    title : 'Ext 4 Panel - Header',
    html : 'Panel body HTML',  //面板体的HTML内容
    //顶部工具栏
    tbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Top Toolbar'
            }
        ]
    } ),
    //顶部工具栏
    bbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Bottom Toolbar'
            }
        ]
    } ),
    //脚注工具栏
    fbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Footer Toolbar'
            }
        ]
    } )
} );

其UI效果图如下:panel-with-bars

从生成的HTML元素的角度来看,该面板包含一个外部包装元素(outer wrapper element),该包装元素包含面板头、面板体包装元素两个部分,后者由顶栏、面板体元素、底栏、脚注栏几个部分组成,如下图 所示:panel-with-bars-el

可以看到,在默认情况下,顶部工具栏、面板头、面板体、底部工具栏等的相对位置关系是固定的,ExtJS 3中,无法改变这种位置关系,ExtJS 4则包含若干改进,便于用户在多个位置摆放工具栏:

  1. 面板头被抽象为组件(Ext.panel.Header),允许设置其位置为top、bottom、left、right
  2. 可以使用dockedItems来配置各工具栏,从而将其放在任何方向

使用上述改进来配置面板头、工具栏,代码如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Ext.create( 'Ext.panel.Panel', {
    collapsible : true,
    width : 400,
    height : 400,
    border : true,
    renderTo : Ext.getBody(),
    title : 'Ext 4 Panel - Header',
    headerPosition : 'right', //面板头的位置,改在右边
    html : 'Panel Body HTML',
    dockedItems : [
        {
            xtype : 'toolbar',
            dock : 'left',  //该工具栏放在左边
            items : [
                {
                    xtype : 'button',
                    text : 'Left Toolbar'
                }
            ]
        }, {
            xtype : 'toolbar',
            dock : 'bottom',
            items : [
                {
                    xtype : 'button',
                    text : 'Bottom Toolbar'
                }
            ]
        }, {
            xtype : 'toolbar',
            dock : 'bottom',
            items : [
                {
                    xtype : 'component',
                    flex : 1
                }, {
                    xtype : 'button',
                    text : 'Footer Toolbar'
                }
            ]
        }
    ]
} );

 效果图:panel-with-bars-docked

出于对ExtJS 3兼容性的考虑,ExtJS 4仍然支持tbar、bbar、fbar,并且新增了rbar、lbar两个类似的配置项。

Toolbar Layout

面板头工具(Header Tools)在ExtJS 4中也作为组件看待,ExtJS会在面板头部显示一系列的图标,其行为需要用户自行定义:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
Ext.create( 'Ext.panel.Panel', {
    width : 500,
    renderTo : Ext.getBody(),
    html : 'Panel',
    title : 'Tools - Header',
    tools : [
        {
            type : 'close',
            handler : function()
            {}//定义按钮的行为
        }, {
            type : 'collapse'
        }, {
            type : 'down'
        }, {
            type : 'expand'
        }, {
            type : 'gear'
        }, {
            type : 'help'
        }, {
            type : 'left'
        }, {
            type : 'maximize'
        }, {
            type : 'minimize'
        }, {
            type : 'minus'
        }, {
            type : 'next'
        }, {
            type : 'pin'
        }, {
            type : 'plus'
        }, {
            type : 'prev'
        }, {
            type : 'print'
        }, {
            type : 'refresh'
        }, {
            type : 'restore'
        }, {
            type : 'right'
        }, {
            type : 'save'
        }, {
            type : 'search'
        }, {
            type : 'toggle'
        }, {
            type : 'unpin'
        }, {
            type : 'up'
        }
    ]
} );

效果图如下:panel-tools

Field Layout

在ExtJS 4中,FormLayout不再被支持,组织表单字段布局的职责由新引入的FieldLayout承担。ExtJS 4的表单布局具有以下特性:

  1. 表单容器默认使用Anchor Layout
  2. 不再需要为字段指定绝对值宽度,而可以使用anchor指定百分比或者负数
  3. 表单中的单个字段(Ext.form.field.Field)的输入框、错误信息由字段布局(Field Layout)确定。在显示错误信息时,ExtJS自动收缩表单字段,以腾出空间。因此,用户不需要考虑如何为错误信息预留空间

下面是一个ExtJS 4表单的例子:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//通过设置ExtJS类的原型对象的属性,可以影响所有以后创建的实例
Ext.form.Field.prototype.msgTarget = 'side';
Ext.create( 'Ext.form.Panel', {
    frame : true,
    title : 'Form',
    margin : 5,
    bodyStyle : 'padding:5px 5px 0',
    width : 350,
    renderTo : Ext.getBody(),
    fieldDefaults : {
        msgTarget : 'side',
        labelWidth : 75
    },
    defaultType : 'textfield',
    //可以指定任何布局方式
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    defaults : {
        //与ExtJS 3不同,不需要指定字段宽度,而可以使用anchor指定宽度(支持百分比、负数)
        anchor : '100%'
    },
    items : [
        {
            fieldLabel : 'First Name',
            name : 'first'
        }, {
            fieldLabel : 'Last Name',
            name : 'last'
        }
    ]
} );
TriggerField Layout

与Field Layout类似,该布局机制可以为Trigger字段的错误信息自动预留空间。

← ExtJS 4元素与组件查询
定制ExtJS 4主题 →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Related Posts

  • ExtJS 4的MVC框架
  • ExtJS 4的容器机制
  • 浅析ExtJS新特性
  • ExtJS 4中的选取器控件
  • 浅析ExtJS 4表单字段

Recent Posts

  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
  • A Comprehensive Study of Kotlin for Java Developers
  • 背诵营笔记
  • 利用LangChain和语言模型交互
  • 享学营笔记
ABOUT ME

汪震 | Alex Wong

江苏淮安人,现居北京。目前供职于腾讯云,专注容器方向。

GitHub:gmemcc

Git:git.gmem.cc

Email:gmemjunk@gmem.cc@me.com

ABOUT GMEM

绿色记忆是我的个人网站,域名gmem.cc中G是Green的简写,MEM是Memory的简写,CC则是我的小天使彩彩名字的简写。

我在这里记录自己的工作与生活,同时和大家分享一些编程方面的知识。

GMEM HISTORY
v2.00:微风
v1.03:单车旅行
v1.02:夏日版
v1.01:未完成
v0.10:彩虹天堂
v0.01:阳光海岸
MIRROR INFO
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
Recent Posts
  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
    In this blog post, I will walk ...
  • A Comprehensive Study of Kotlin for Java Developers
    Introduction Purpose of the Study Understanding the Mo ...
  • 背诵营笔记
    Day 1 Find Your Greatness 原文 Greatness. It’s just ...
  • 利用LangChain和语言模型交互
    LangChain是什么 从名字上可以看出来,LangChain可以用来构建自然语言处理能力的链条。它是一个库 ...
  • 享学营笔记
    Unit 1 At home Lesson 1 In the ...
  • K8S集群跨云迁移
    要将K8S集群从一个云服务商迁移到另外一个,需要解决以下问题: 各种K8S资源的迁移 工作负载所挂载的数 ...
  • Terraform快速参考
    简介 Terraform用于实现基础设施即代码(infrastructure as code)—— 通过代码( ...
  • 草缸2021
    经过四个多月的努力,我的小小荷兰景到达极致了状态。

  • 编写Kubernetes风格的APIServer
    背景 前段时间接到一个需求做一个工具,工具将在K8S中运行。需求很适合用控制器模式实现,很自然的就基于kube ...
  • 记录一次KeyDB缓慢的定位过程
    环境说明 运行环境 这个问题出现在一套搭建在虚拟机上的Kubernetes 1.18集群上。集群有三个节点: ...
  • eBPF学习笔记
    简介 BPF,即Berkeley Packet Filter,是一个古老的网络封包过滤机制。它允许从用户空间注 ...
  • IPVS模式下ClusterIP泄露宿主机端口的问题
    问题 在一个启用了IPVS模式kube-proxy的K8S集群中,运行着一个Docker Registry服务 ...
  • 念爷爷
      今天是爷爷的头七,十二月七日、阴历十月廿三中午,老人家与世长辞。   九月初,回家看望刚动完手术的爸爸,发

  • 6 杨梅坑

  • liuhuashan
    深圳人才公园的网红景点 —— 流花山

  • 1 2020年10月拈花湾

  • 内核缺陷触发的NodePort服务63秒延迟问题
    现象 我们有一个新创建的TKE 1.3.0集群,使用基于Galaxy + Flannel(VXLAN模式)的容 ...
  • Galaxy学习笔记
    简介 Galaxy是TKEStack的一个网络组件,支持为TKE集群提供Overlay/Underlay容器网 ...
TOPLINKS
  • Zitahli's blue 91 people like this
  • 梦中的婚礼 64 people like this
  • 汪静好 61 people like this
  • 那年我一岁 36 people like this
  • 为了爱 28 people like this
  • 小绿彩 26 people like this
  • 彩虹姐姐的笑脸 24 people like this
  • 杨梅坑 6 people like this
  • 亚龙湾之旅 1 people like this
  • 汪昌博 people like this
  • 2013年11月香山 10 people like this
  • 2013年7月秦皇岛 6 people like this
  • 2013年6月蓟县盘山 5 people like this
  • 2013年2月梅花山 2 people like this
  • 2013年淮阴自贡迎春灯会 3 people like this
  • 2012年镇江金山游 1 people like this
  • 2012年徽杭古道 9 people like this
  • 2011年清明节后扬州行 1 people like this
  • 2008年十一云龙公园 5 people like this
  • 2008年之秋忆 7 people like this
  • 老照片 13 people like this
  • 火一样的六月 16 people like this
  • 发黄的相片 3 people like this
  • Cesium学习笔记 90 people like this
  • IntelliJ IDEA知识集锦 59 people like this
  • 基于Kurento搭建WebRTC服务器 38 people like this
  • Bazel学习笔记 37 people like this
  • PhoneGap学习笔记 32 people like this
  • NaCl学习笔记 32 people like this
  • 使用Oracle Java Mission Control监控JVM运行状态 29 people like this
  • Ceph学习笔记 27 people like this
  • 基于Calico的CNI 27 people like this
Tag Cloud
ActiveMQ AspectJ CDT Ceph Chrome CNI Command Cordova Coroutine CXF Cygwin DNS Docker eBPF Eclipse ExtJS F7 FAQ Groovy Hibernate HTTP IntelliJ IO编程 IPVS JacksonJSON JMS JSON JVM K8S kernel LB libvirt Linux知识 Linux编程 LOG Maven MinGW Mock Monitoring Multimedia MVC MySQL netfs Netty Nginx NIO Node.js NoSQL Oracle PDT PHP Redis RPC Scheduler ServiceMesh SNMP Spring SSL svn Tomcat TSDB Ubuntu WebGL WebRTC WebService WebSocket wxWidgets XDebug XML XPath XRM ZooKeeper 亚龙湾 单元测试 学习笔记 实时处理 并发编程 彩姐 性能剖析 性能调优 文本处理 新特性 架构模式 系统编程 网络编程 视频监控 设计模式 远程调试 配置文件 齐塔莉
Recent Comments
  • qg on Istio中的透明代理问题
  • heao on 基于本地gRPC的Go插件系统
  • 黄豆豆 on Ginkgo学习笔记
  • cloud on OpenStack学习笔记
  • 5dragoncon on Cilium学习笔记
  • Archeb on 重温iptables
  • C/C++编程:WebSocketpp(Linux + Clion + boostAsio) – 源码巴士 on 基于C/C++的WebSocket库
  • jerbin on eBPF学习笔记
  • point on Istio中的透明代理问题
  • G on Istio中的透明代理问题
  • 绿色记忆:Go语言单元测试和仿冒 on Ginkgo学习笔记
  • point on Istio中的透明代理问题
  • 【Maven】maven插件开发实战 – IT汇 on Maven插件开发
  • chenlx on eBPF学习笔记
  • Alex on eBPF学习笔记
  • CFC4N on eBPF学习笔记
  • 李运田 on 念爷爷
  • yongman on 记录一次KeyDB缓慢的定位过程
  • Alex on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • haolipeng on 基于本地gRPC的Go插件系统
  • 吴杰 on 基于C/C++的WebSocket库
©2005-2025 Gmem.cc | Powered by WordPress | 京ICP备18007345号-2