Learning EXT 翻译(八).docVIP

第四章 按钮、菜单和工具栏（2） Shortcuts（快捷方式）： Ext有很多shortcuts，使得编码变的更快了。shortcuts就是一个或者连个字符组成的用来做显示控制的配置对象。如下，十一哥标准的工具栏filler(就是之前的fill)配置： { ??????????????? xtype: ‘tbfill’ }????????????? 它的shortcuts就是“-”。 不是所有的快捷方式都能在文档中查到，你可以参看源码，找到你需要的。这里列出几种常用的shortcuts： 组件 Shortcut 说明 Fill “-” 用来将其后的组件推到工具栏最右侧 Separator “-”或”separator” 一个用来分割左右的垂直竖杠 Spacer ‘’ 用来做分割元素的空白，每个2像素的宽度，可以通过修改ytb-spacer CSS类来改变其大小 TextItem ‘你需要的文本’ 直接添加文本或者html到工具栏，左右用逗号分割 ? 图标按钮： 标准的图标按钮就是你在文本编辑器里看到的使字体加粗或者倾斜的那些按钮。建立图标按钮需要两步——定义被用作图标的图片和适当的CSS类。 { ??????????????? xtype: tbbutton, ??????????????? cls: x-btn-icon, ??????????????? icon: images/bomb.png } 可以让图标和文字共存，只要调整CSS类并且让添加text配置项： { ??????????????? xtype: tbbutton, ??????????????? cls: x-btn-text-icon, ??????????????? icon: images/bomb.png, ??????????????? text: Tha Bomb } 按钮操作函数(handler)——点击我！ 按钮不仅需要好看而且还要能完成和用户的交互。这就是操作函数(handler)为什么会被引入进来。一个handler是一个在按钮被单击后调用的函数。 handler配置项就是我们加入自己函数的地方： { ??????????????? xtype: tbbutton, ??????????????? text: Button, ??????????????? handler: function(){ ??????????????????????????????? Ext.Msg.alert(Boo, Here I am); ??????????????? } } 这段代码会在按钮单击后弹出警告窗口。有些时候，我们需要在单击后改变按钮的状态，所以每个按钮的handler都会传递按钮本身作为函数的参数。第一个参数就是对触发事件的组件的引用！ { ??????????????? xtype: tbbutton, ??????????????? text: Button, ??????????????? handler: function(f){ ??????????????????????????????? f.disable(); ??????????????? } } 我们可以利用这个对按钮本身的引用去访问按钮的属性和方法。在本例里我们调用了disable方法来让按钮变灰且不可点击。 我们可以做的更多，让我们尝试些更有用的东西。 在点击菜单项时加载内容： 让我们以按钮单击为基础做一些更有意义的事情。在这个例子里，我们将为每个菜单项添加配置项来决定加载那个文件的内容到网页中： { ??????????????? xtype: tbsplit, ??????????????? text: Help, ??????????????? menu: [{ ??????????????????????????????? text: Genre, ??????????????????????????????? helpfile: genre, ??????????????????????????????? handler: Movies.showHelp ??????????????? },{ ??????????????????????????????? text: Director, ??????????????????????????????? helpfile: director, ??????????????????????????????? handler: Movies.showHelp ??????????????? },{ ??????????????????????????????? text: Title, ??