ExtJs学习笔记(19)_复杂Form示例

Form布局在所有布局中是无限复杂,使用频度最广,同时也是最难了解的,下边给出几个示范

前言

天地驱动设计近期貌似起始火起来了,越来越多的人伊始认识到世界规划的要害,从本人做过的门类来看,似乎非洲业已有好多的店家开始执行世界驱动设计了,我看领域驱动设计也有些时日了,然则网上随便是随笔仍旧代码,都显得太过“高大上”,一谈领域驱动设计,一大堆的定义一股脑的给你上上来,搞的多少晕头转向,而我想在部分中等项目举行世界驱动也遭受了不小的阻力,我们对许多事物都地处一种恐怖的事态,而且在正真最先实施时,也境遇有的疑难,所以也想和豪门交换学习,因而开班在此写写对世界驱动的明亮,前边会有部分轻量的朝三暮四代码。

 

何以要领域驱动设计?

1.登录UI界面

简化数据存储

天地驱动设计有成百上千缘故,谈到我干什么要在铺子履行领域驱动设计,说起来依旧很有趣的,因为原本基于数据驱动的开发格局,也就是传统的多层开发架构,我们定义了一堆DAL来操作数据,
在.Net我们一般有两种采取办法,一种是用ORM像Entity Framework,
另一种想使用Dapper这样轻量级的Mapping工具,这些都要把关系型数据转换为目的。结果导致以下二种结果。

  • 从没科学的运用ORM, 导致数据加载过多,导致系统性能很差。
  • 为了然决性能问题,就不加载一些导航属性,可是却把DB
    Entity重临上层,这样对象的局部性能为空,上层使用那一个数量时根本不了解什么日子这么些特性是有值的,这一个是很难看的是不是?
  • 如是又起来拔取部分轻量级的数码形式,比如利用Dapper然后自己写SQL语句,这自然是很不利的点子,可是多数人的SQL能力实际不敢恭维,大部分写出来的SQL语句,甚至比EnityFramework生成的语句还差。

就此,我就想我们做项目,大部分甩卖的应该是事情,如何让程序员从数据存储,模型转换的大泥塘里解放出来,领域驱动设计就进来了自家的视线,当然光从数额这多少个角度还不足以选拔世界驱动设计,用一个NoSQL数据库是不是就迎刃而解了?
可是NoSQL也有局部题目,比如MongoDB怎么样更优雅的担保工作以及数据的一致性等。

图片 1图片 2Login
UI
图片 3<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
图片 4
图片 5<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
图片 6<head>
图片 7    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
图片 8    <link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
图片 9     <script type=”text/javascript” src=”../adapter/ext/ext-base.js”></script>
图片 10    <script type=”text/javascript” src=”../ext-all.js”></script>     
图片 11    <title>Form 布局应用_Login登录框</title>   
图片 12</head>
图片 13<body>
图片 14图片 15<script type=”text/javascript”>图片 16
图片 17图片 18    Ext.onReady(function() 图片 19{
图片 20图片 21        var login = new Ext.FormPanel(图片 22{
图片 23            renderTo: Ext.getBody(),
图片 24            labelAlign: ‘top’,//标签排在最上边
图片 25            frame: true,
图片 26            id: ‘login’,
图片 27            bodyStyle: ‘padding:5px 5px 0’,            
图片 28图片 29            items: [图片 30{
图片 31                layout: ‘column’,  //把整个空间划分成两列 
图片 32图片 33                items: [图片 34{
图片 35                    html: ‘左边登录Logo区’, //左侧列放一个logo 
图片 36                    columnWidth: 0.5
图片 37图片 38                }, 图片 39{
图片 40                    columnWidth: 0.5,
图片 41                    layout: ‘form’, //右侧列再分为上下两行 
图片 42图片 43                    items: [图片 44{
图片 45                        xtype: ‘textfield’,
图片 46                        fieldLabel: ‘用户名’, //第一行是用户名输入框
图片 47                        allowBlank: false,
图片 48                        blankText: “请输入用户名!”,
图片 49                        name: ‘name’,
图片 50                        id: ‘name’,                       
图片 51                        anchor: ‘80%’
图片 52图片 53                    }, 图片 54{
图片 55                        xtype: ‘textfield’,
图片 56                        fieldLabel: ‘密码’, //第二行是密码输入框
图片 57                        allowBlank: false,
图片 58                        blankText: “请输入密码!”,
图片 59                        name: ‘pass’,
图片 60                        id: ‘pass’,
图片 61                        anchor: ‘80%’,
图片 62                        inputType: ‘password’
图片 63                    }]
图片 64                }]
图片 65             }],
图片 66图片 67                        buttons: [图片 68{ text: ‘登录’, handler: function() 图片 69{
图片 70                            var name = Ext.get(“name”);
图片 71                            var pass = Ext.get(“pass”);
图片 72图片 73                            if (name.dom.value == “”) 图片 74{
图片 75                                Ext.MessageBox.alert(“指示”, “请输入登录名”);
图片 76                                name.highlight();
图片 77                                name.focus();
图片 78                                return false;
图片 79                            }
图片 80图片 81                            if (pass.dom.value == “”) 图片 82{
图片 83                                Ext.MessageBox.alert(“指示”,”请输入密码”);
图片 84                                pass.highlight();
图片 85                                pass.focus();
图片 86                                return false;
图片 87                            }
图片 88                        }
图片 89
图片 90图片 91                        }, 图片 92{ text: ‘重置’, handler: function() 图片 93{
图片 94                            Ext.get(“name”).dom.value = “”;
图片 95                            Ext.get(“pass”).dom.value = “”;
图片 96                        } }]
图片 97                        });
图片 98                        login.hide();
图片 99
图片 100                        var wLogin;
图片 101                        var aLogin = Ext.get(“aLogin”);
图片 102图片 103                        aLogin.on(“click”, function() 图片 104{
图片 105图片 106                            if (!wLogin) 图片 107{
图片 108图片 109                                wLogin = new Ext.Window(图片 110{
图片 111                                    title: “用户登录”,
图片 112                                    width: 400,
图片 113                                    plain: true,
图片 114                                    modal: true,
图片 115                                    height: 175,
图片 116                                    resizable:false,
图片 117                                    items: [login],
图片 118                                    closeAction: “hide”
图片 119                                });
图片 120                            }
图片 121                            login.show();
图片 122                            wLogin.show();
图片 123                        })
图片 124                    });
图片 125                
图片 126</script>
图片 127</body>
图片 128
图片 129<a href=”#” id=”aLogin”>用户登录</a>
图片 130</html>
图片 131

更多询问上下文

咱俩很多软件的题材,我们都晓得是需要的题目,也就是客户的需求我们很难精晓准确,导致程序员更加关心”HOW”
而忽视了”WHAT”, 最终做了多少个礼拜甚至更长日子,结果客户会说:”What?! I
told you”, 可是客户告知我的,我们知道是不等同的。比如客户说:“ Great
job, I love you!” 这么些Love肯定不是男女之间的Love,
我们得到的是一个客户的要求,他的上下文是怎么? 比如说:“这么些球打的好”,
即使是在打篮球,肯定说的事篮球,要是是在打乒乓球必将说的是乒乓球。
而世界驱动设计里大家可以让业务人员更多的出席系统,更早的出席系统。

 图片 132

统一语言(Ubiquitous Language)

业务人士和我们运用同样的语言,我们的先后比如让事情尽量集中在天地里,比如在观念的数码驱动里,假诺说杰克(Jack)爱Rose,
大家一般会这么写

C# UserService.Love(Jack, Rose)

唯独我们业务人士很意外什么人Love什么人? 为何要User瑟维斯(Service)?,
倘诺大家写成上面这样

Jack.Love(Rose)

还有即便大家用

Company.hire(employee)

来代替

companyservice.hire(company,employee)

如此大家就更易于让业务人士出席进去,而且代码可以更便于表示真实的事体场景。

2.插手其它不同系列的输入组件后

图片 133图片 134Login UI
2
图片 135<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
图片 136
图片 137<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
图片 138<head>
图片 139    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
图片 140    <link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
图片 141     <script type=”text/javascript” src=”../adapter/ext/ext-base.js”></script>
图片 142    <script type=”text/javascript” src=”../ext-all.js”></script>     
图片 143    <title>Form 布局应用_Login登录框</title>   
图片 144</head>
图片 145<body>
图片 146图片 147<script type=”text/javascript”>图片 148
图片 149图片 150    Ext.onReady(function() 图片 151{
图片 152图片 153        var login = new Ext.FormPanel(图片 154{
图片 155            renderTo: Ext.getBody(),
图片 156            labelAlign: ‘top’, //标签排在最上边
图片 157            frame: true,
图片 158            id: ‘login’,
图片 159            bodyStyle: ‘padding:3px 3px 0’,            
图片 160图片 161            items: [图片 162{
图片 163                layout: ‘column’,  //把整个空间划分成两列 
图片 164图片 165                items: [图片 166{
图片 167                    columnWidth: 0.5,
图片 168                    layout: ‘form’, //左边列分成三行(遵照item个数来定的)
图片 169图片 170                    items: [图片 171{
图片 172                        xtype: ‘textfield’, //第一行,呢称
图片 173                        fieldLabel: “呢称”,
图片 174                        allowBlank: false,
图片 175                        blankText: ‘请输入呢称!’,
图片 176                        name: “nickname”,
图片 177                        id: “nickname”,
图片 178                        anchor: ‘80%’
图片 179图片 180                    }, 图片 181{
图片 182                        xtype: ‘textfield’, //第二行,电子邮箱
图片 183                        fieldLabel: “电子邮箱”,
图片 184                        allowBlank: false,
图片 185                        blankText: ‘请输入电子邮箱!’,
图片 186                        vtype: “email”,
图片 187                        name: “email”,
图片 188                        id: “email”,
图片 189                        anchor: ‘80%’
图片 190图片 191                    }, 图片 192{
图片 193                        xtype: ‘datefield’,
图片 194                        fieldLabel: “出生日期”, //第三行,出生日期                       
图片 195                        allowBlank: false,
图片 196                        name: “birthday”,
图片 197                        id: “birthday”,
图片 198                        anchor: ‘80%’
图片 199                    }]
图片 200图片 201                    }, 图片 202{
图片 203                        columnWidth: 0.5,
图片 204                        layout: ‘form’, //左侧列分成三行(遵照item个数来定的)
图片 205图片 206                        items: [图片 207{
图片 208                            xtype: ‘textfield’,
图片 209                            fieldLabel: ‘用户名’, //第一行是用户名输入框
图片 210                            allowBlank: false,
图片 211                            blankText: “请输入用户名!”,
图片 212                            name: ‘name’,
图片 213                            id: ‘name’,
图片 214                            anchor: ‘80%’
图片 215图片 216                        }, 图片 217{
图片 218                            xtype: ‘textfield’,
图片 219                            fieldLabel: ‘密码’, //第二行是密码输入框
图片 220                            inputType: “password”,
图片 221                            allowBlank: false,
图片 222                            blankText: “请输入密码!”,
图片 223                            name: ‘pass’,
图片 224                            id: ‘pass’,
图片 225                            anchor: ‘80%’,
图片 226                            inputType: ‘password’
图片 227图片 228                        }, 图片 229{
图片 230                            xtype: ‘radiogroup’,//第三行是喜欢
图片 231                            fieldLabel: ‘爱好’,
图片 232图片 233                            items: [图片 234{
图片 235                                xtype: “panel”,
图片 236                                layout: “column”, //也得以是table,实现多列布局                               
图片 237图片 238                                items: [图片 239{
图片 240                                    width:55, //宽度为100px
图片 241                                    xtype:”checkbox”,
图片 242                                    boxLabel: “足球”, //显示在复选框右边的文字
图片 243                                    name: “”
图片 244图片 245                                }, 图片 246{
图片 247                                    width:55,
图片 248                                    xtype:”checkbox”,
图片 249                                    boxLabel: “篮球”,
图片 250                                    name: “”
图片 251图片 252                                }, 图片 253{
图片 254                                    width:55,
图片 255                                    xtype:”checkbox”,
图片 256                                    boxLabel: “音乐”,
图片 257                                    name: “”
图片 258                                }]
图片 259                            }]
图片 260                        }]
图片 261                    }]
图片 262                 }],
图片 263图片 264                                buttons: [图片 265{ text: ‘登录’, handler: function() 图片 266{
图片 267                                    var name = Ext.get(“name”);
图片 268                                    var pass = Ext.get(“pass”);
图片 269图片 270                                    if (name.dom.value == “”) 图片 271{
图片 272                                        Ext.MessageBox.alert(“指示”, “请输入登录名”);
图片 273                                        name.highlight();
图片 274                                        name.focus();
图片 275                                        return false;
图片 276                                    }
图片 277图片 278                                    if (pass.dom.value == “”) 图片 279{
图片 280                                        Ext.MessageBox.alert(“指示”, “请输入密码”);
图片 281                                        pass.highlight();
图片 282                                        pass.focus();
图片 283                                        return false;
图片 284                                    }
图片 285                                }
图片 286
图片 287图片 288                                }, 图片 289{ text: ‘重置’, handler: function() 图片 290{
图片 291                                    Ext.get(“name”).dom.value = “”;
图片 292                                    Ext.get(“pass”).dom.value = “”;
图片 293                                } }]
图片 294                                });
图片 295                                login.hide();
图片 296
图片 297                                var wLogin;
图片 298                                var aLogin = Ext.get(“aLogin”);
图片 299图片 300                                aLogin.on(“click”, function() 图片 301{
图片 302图片 303                                    if (!wLogin) 图片 304{
图片 305图片 306                                        wLogin = new Ext.Window(图片 307{
图片 308                                            title: “用户登录”,
图片 309                                            width: 400,
图片 310                                            height: 235,
图片 311                                            plain: true,
图片 312                                            modal: true,                                            
图片 313                                            resizable: false,
图片 314                                            items: [login],
图片 315                                            closeAction: “hide”
图片 316                                        });
图片 317                                    }
图片 318                                    login.show();
图片 319                                    wLogin.show();
图片 320                                })
图片 321
图片 322
图片 323
图片 324                            });
图片 325                
图片 326</script>
图片 327</body>
图片 328
图片 329<a href=”#” id=”aLogin”>用户登录</a>
图片 330</html>
图片 331

 图片 332

3.越来越复杂的结构:

图片 333图片 334Code
图片 335图片 336<script type=”text/javascript”>图片 337
图片 338图片 339    Ext.onReady(function() 图片 340{
图片 341图片 342        var form = new Ext.FormPanel(图片 343{
图片 344            title: “复杂Form布局示例”,
图片 345            width: 640,
图片 346            height: 400,
图片 347            renderTo: Ext.getBody(),
图片 348            labelWidth: 80,
图片 349            labelAlign: “top”,
图片 350            frame: true,
图片 351图片 352            items: [图片 353{
图片 354                layout: “column”,
图片 355图片 356                items: [图片 357{
图片 358                    columnWidth: 0.5,
图片 359                    layout: “form”,
图片 360图片 361                    items: 图片 362{
图片 363                        xtype: “textfield”,
图片 364                        fieldLabel: “A1”,
图片 365                        anchor: “90%”
图片 366                    }
图片 367图片 368                }, 图片 369{
图片 370                    columnWidth: 0.5,
图片 371                    layout: “form”,
图片 372图片 373                    items: 图片 374{
图片 375                        xtype: “textfield”,
图片 376                        fieldLabel: “A2”,
图片 377                        anchor: “90%”
图片 378                    }
图片 379}]
图片 380图片 381                }, 图片 382{ items: [图片 383{
图片 384                    layout: “column”,
图片 385图片 386                    items: [图片 387{
图片 388                        columnWidth: 0.33,
图片 389                        layout: “form”,
图片 390图片 391                        items: 图片 392{
图片 393                            xtype: “datefield”,
图片 394                            fieldLabel: “B1”,
图片 395                            anchor: “90%”
图片 396                        }
图片 397图片 398                    }, 图片 399{
图片 400                        columnWidth: 0.33,
图片 401                        layout: “form”,
图片 402图片 403                        items: [图片 404{
图片 405                            xtype: “radiogroup”,
图片 406                            fieldLabel: “B2”,
图片 407                            columns: [“33%”, “33%”, “33%”],
图片 408图片 409                            items: [图片 410{ boxLabel: ‘我是’, name: ‘rb-auto’, inputValue: 1 },
图片 411图片 412                                    图片 413{ boxLabel: ‘一个’, name: ‘rb-auto’, inputValue: 2, checked: true },
图片 414图片 415                                    图片 416{ boxLabel: ‘好人’, name: ‘rb-auto’, inputValue: 3}]
图片 417                            //下边也是一种解决办法,不管radiogroup或是上边的写法,都很难保证在装有浏览器下效果等同
图片 418                            //                            xtype: “panel”,
图片 419                            //                            layout: “column”,
图片 420                            //                            fieldLabel: “球类”,
图片 421                            //                            isFormField: true,
图片 422                            //                            items: [{
图片 423                            //                                columnWidth: 0.33,
图片 424                            //                                xtype: “checkbox”,
图片 425                            //                                boxLabel: “足球”,
图片 426                            //                                name: “”,
图片 427                            //                                anchor:”100%”
图片 428                            //                            }, {
图片 429                            //                                columnWidth:0.33,
图片 430                            //                                xtype:”checkbox”,
图片 431                            //                                boxLabel:”蓝球”,
图片 432                            //                                name:””,
图片 433                            //                                anchor: “100%”
图片 434                            //                            }, {
图片 435                            //                                columnWidth: 0.33,
图片 436                            //                                xtype: “checkbox”,
图片 437                            //                                boxLabel: “乒乓球”,
图片 438                            //                                name: “”,
图片 439                            //                                anchor: “100%”
图片 440                            //                            }]
图片 441}]
图片 442图片 443                        }, 图片 444{
图片 445                            columnWidth: 0.33,
图片 446                            layout: “form”,
图片 447图片 448                            items: 图片 449{
图片 450                                xtype: “textfield”,
图片 451                                fieldLabel: “B3”,
图片 452                                inputType: “password”,
图片 453                                anchor: “90%”
图片 454                            }
图片 455}]
图片 456}]
图片 457图片 458                }, 图片 459{
图片 460                    xtype: “htmleditor”,
图片 461                    fieldLabel: “详细内容”,
图片 462                    height: 200,
图片 463                    anchor: “100%”
图片 464}]
图片 465图片 466                , buttons: [图片 467{ text: “Save” }, 图片 468{text:”cancel”}]
图片 469
图片 470                });
图片 471            });
图片 472            
图片 473</script>

 

 图片 474

 转载请表明来源”菩提树下的杨过”http://www.cnblogs.com/yjmyzz/archive/2008/09/03/1283042.html

 

技巧:
1.先用new Ext.FormPanel({
items:[
{...},{...},{...}...
]
})
类似的代码,确定整个form的行数,即items里{}的个数
2.每行如果要分列,再利用
{
layout:"column",
items:[{},{},{}...]
}
以column布局,横向分切为N列,即items:[{},{},{}...]中{}的个数
3.每列中,如果要放输入项,再把每行相关列(其实就是单元格),采用form布局方式处理,并标明输入项,类似以下代码:
items: [{
columnWidth: 0.5,
layout: "form",
items: {
xtype:"textfield",
fieldLabel:"A1",
anchor:"90%"
}
}, {
columnWidth: 0.5,
html: "aaaaaaaaaaa"
}]