Extjs 4.02 - 需要自定义组件
我正在尝试创建一个自定义容器,但不知道如何去做。
我需要它看起来像这样:
(不要注意它是 RTL,这只是一个入门的草图) 其中橙色字体是我希望成为 H1 元素的页面标题。 它有一个简单搜索和一个高级搜索,当单击搜索按钮旁边的小箭头时,高级搜索会弹出。
问题:
1)我应该为此扩展什么? 2)如何为不同的页面实现不同的高级搜索形式? 3)如何为控制器可以与 dom 交互并操作 dom 的标题放置一个设置器?
基本上任何建议都会很好,因为我需要一个起点。
谢谢
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
有很多方法可以做到这一点,但这就是我要做的。
我不确定“不同页面的高级表单”,您能详细说明一下吗?您是否希望以某种方式自动生成搜索表单?
扩展Ext.form.Panel,并为字段使用表格布局
请参阅:http://docs。 sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
在面板上使用“tbar”而不是设置“title”。您可以放置搜索组合、tbfill,然后放置“标题”的 tbtext。为了方便起见,您可以覆盖面板的 setTitle 函数来操作此 tbtext 字段,而不是正常行为。像这样的事情:
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
我建议您从 Ext.panel.Panel 本身进行扩展,并劫持所有这些自定义项目的 dom,添加搜索栏等。如果您不想要任何来自
Ext.panel.Panel
的奇特东西,您还可以从Ext.Component
或Ext.container.Container
扩展它(以包含更多组件),甚至是最低的Ext.util.Observable
。看来您可能需要扩展一些
Ext.menu.Menu
并定义一些不同的输入框集,以便您可以从创建浮动菜单中受益(如果这就是您想要的) )。或者,如果您有时间,您甚至可以从Ext.Component
扩展并构建您自己的自定义组件,甚至更低的Ext.util.Observable
。二传手?它将在(1)中的扩展组件中:)
所有这些都作为粗略的意见。根据您的要求,它们可能会有所不同。
I would suggest you to just extend from
Ext.panel.Panel
itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff fromExt.panel.Panel
, you can also extend it fromExt.Component
, orExt.container.Container
(to contains more components), and even the lowestExt.util.Observable
.It seems like you might need to extend a few
Ext.menu.Menu
and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend fromExt.Component
and build your own customized component, or even lower,Ext.util.Observable
.The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.