在这一章节,我们将会看到关于后台表单(或称作:视窗)的创建,在上一章节,相信我们已经了解了后台 Grid 表的细节,现在让我们进入今天的旅程
在 Magento 中, 表单(form)可以被分为4个基本部分
1
2
3
4
|
1、
表单容器
=
>
FORM
Container
2、
表单标签
=
>
FORM
tag
3、
表单选项卡
=
>
FORM
Tabs
4、
真实的表单内容
=
>
Actual
Form
Fields
|
在深入这些之前,我们先把下面的代码放进后台的 controller 文件里,来显示出一个表单,你可以放在你想要显示表单的方法(Action)里面,例如:
1
2
3
4
5
6
7
8
9
10
11
|
public
function
newAction
(
)
{
$this
->
loadLayout
(
)
;
$this
->
_addContent
(
$this
->
getLayout
(
)
->
createBlock
(
'employee/adminhtml_employee_edit'
)
)
->
_addLeft
(
$this
->
getLayout
(
)
->
createBlock
(
'employee/adminhtml_employee_edit_tabs'
)
)
;
$this
->
renderLayout
(
)
;
}
|
这里可以直接看出我们在 content 和 left 区域里添加了两个 block, 主要的表单容器被加进了 content 区域,而表单选项卡被加进了 left 区域
表单容器
表单容器就是一个大的 div 框, 它包含了表单的所有元素和 html 代码, 为了创建一个容器, 你需要在 Block/Adminhtml/employee/ 文件下创一个 php 文件,并继承了 Mage_Adminhtml_Block_Widget_Form_Container 类
我们就把文件名命为: Edit.php
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
|
class
Excellence_Employee_Block_Adminhtml_Employee_Edit
extends
Mage_Adminhtml_Block_Widget_Form_Container
{
public
function
__construct
(
)
{
parent
::
__construct
(
)
;
$this
->
_objectId
=
'id'
;
$this
->
_blockGroup
=
'employee'
;
$this
->
_controller
=
'adminhtml_employee'
;
$this
->
_updateButton
(
'save'
,
'label'
,
Mage::
helper
(
'employee'
)
->
__
(
'Save'
)
)
;
$this
->
_updateButton
(
'delete'
,
'label'
,
Mage::
helper
(
'employee'
)
->
__
(
'Delete'
)
)
;
// $this->removeButton('reset');
$this
->
_addButton
(
'saveandcontinue'
,
array
(
'label'
=
>
Mage::
helper
(
'adminhtml'
)
->
__
(
'Save And Continue Edit'
)
,
'onclick'
=
>
'saveAndContinueEdit()'
,
'class'
=
>
'save'
,
)
,
-
100
)
;
}
public
function
getHeaderText
(
)
{
return
Mage::
helper
(
'employee'
)
->
__
(
'My Form Container'
)
;
}
}
|
这就是表单容器的截图:
现在让我们来看下,这里面都写了些什么重要的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
public
function
getHeaderText
(
)
//这个方法返回出我们想在表单头部展示出的标题, 在上图已用红色框出
$this
->
_objectId
//这个变量被应用于表单的 URL 中, 它包含了表单实体的主键
//拿删除按钮的 URL 来说: 模块/控制器/方法名/$this->_objectid/3
$this
->
_blockGroup
=
'employee'
;
和
$this
->
_controller
=
'adminhtml_employee'
;
//这两个变量比较重要,它们就是用来锁定表单选项卡(tabs)文件的,
//其路径应该是 {$this->_blockGroup . '/' . $this->_controller . '_' . $this->_mode . '_form'},
//当中的$this->mode含有默认值: 'edit', 那么展现出的路径是: 'employee/adminhtml_employee_edit_form'
$this
->
_updateButton
(
)
和
$this
->
_addButton
(
)
//是用来在表单容器中添加或更新按钮的, 效果已在上图的红框中展示
|
表单标签
这个 Block/Adminhtml/Employee/Edit/Form.php 文件包含真实的 <form> 标签, 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
class
Excellence_Employee_Block_Adminhtml_Employee_Edit_Form
extends
Mage_Adminhtml_Block_Widget_Form
{
protected
function
_prepareForm
(
)
{
$form
=
new
Varien_Data_Form
(
array
(
'id'
=
>
'edit_form'
,
'action'
=
>
$this
->
getUrl
(
'*/*/save'
,
array
(
'id'
=
>
$this
->
getRequest
(
)
->
getParam
(
'id'
)
)
)
,
'method'
=
>
'post'
,
'enctype'
=
>
'multipart/form-data'
)
)
;
$form
->
setUseContainer
(
true
)
;
$this
->
setForm
(
$form
)
;
return
parent
::
_prepareForm
(
)
;
}
}
|
关于这个文件的路径,我们之前有提过,取决于表单容器文件里的两个变量
{ $this->_blockGroup . ‘/’ . $this->_controller . ‘_’ . $this->_mode . ‘_form’},
代码还是比较容易理解的,设置了表单 id,actoin, method 和 enctype 的值
表单选项卡
主要用来在表单的左边添加选项卡, 可见下面实图:
文件的路径为 Block/Adminhtml/Employee/Edit/Tabs.php, 代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
class
Excellence_Employee_Block_Adminhtml_Employee_Edit_Tabs
extends
Mage_Adminhtml_Block_Widget_Tabs
{
public
function
__construct
(
)
{
parent
::
__construct
(
)
;
$this
->
setId
(
'employee_tabs'
)
;
$this
->
setDestElementId
(
'edit_form'
)
;
$this
->
setTitle
(
Mage::
helper
(
'employee'
)
->
__
(
'Employee Information'
)
)
;
}
protected
function
_beforeToHtml
(
)
{
$this
->
addTab
(
'form_section'
,
array
(
'label'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Employee Information'
)
,
'title'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Employee Information'
)
,
'content'
=
>
$this
->
getLayout
(
)
->
createBlock
(
'employee/adminhtml_employee_edit_tab_form'
)
->
toHtml
(
)
,
)
)
;
return
parent
::
_beforeToHtml
(
)
;
}
}
|
$this->setDestElementId(‘edit_form’); ==> 这里的值应该和你在 Form.php 中 form id 的值一样,
‘id’ => ‘edit_form’
可以用 $this->addTab 方法添加多个选项卡, 现在我们只有一个选项卡 ‘Employee Information’, 而它所对应的右边 content 内容 来自于 Block/Adminhtml/Employee/Edit/Tab/Form.php
真实的表单内容
现在我们就来建立我们的 content 内容吧, 代码如下:
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
|
class
Excellence_Employee_Block_Adminhtml_Employee_Edit_Tab_Form
extends
Mage_Adminhtml_Block_Widget_Form
{
protected
function
_prepareForm
(
)
{
$form
=
new
Varien_Data_Form
(
)
;
$this
->
setForm
(
$form
)
;
$fieldset
=
$form
->
addFieldset
(
'employee_form'
,
array
(
'legend'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Employee information'
)
)
)
;
$fieldset
->
addField
(
'title'
,
'text'
,
array
(
'label'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Title'
)
,
'class'
=
>
'required-entry'
,
'required'
=
>
true
,
'name'
=
>
'title'
,
)
)
;
$fieldset
->
addField
(
'active'
,
'select'
,
array
(
'label'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Enabled:'
)
,
'name'
=
>
'active'
,
'class'
=
>
'required-entry'
,
'required'
=
>
true
,
'values'
=
>
array
(
array
(
'value'
=
>
1
,
'label'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'Yes'
)
,
)
,
array
(
'value'
=
>
0
,
'label'
=
>
Mage::
helper
(
'employee'
)
->
__
(
'No'
)
,
)
,
)
,
)
)
;
return
parent
::
_prepareForm
(
)
;
}
}
|
到这里我们就添加了两个 <input> 标签我我们的保单内容里
表单保存
因为我们已经在 Excellence/Employee/Block/Adminhtml/Employee/Edit/Form.php 定义过表单的信息,在此案例中 Action 就是:
$this->getUrl(‘*/*/save’, array(‘id’ => $this->getRequest()->getParam(‘id’))
所以我们要在 controller 文件中创建 saveAction() 方法, 代码范例如下, 你可以在这个方法中添加更多你想要的操作
1
2
3
4
5
6
|
public
function
saveAction
(
)
{
if
(
$data
=
$this
->
getRequest
(
)
->
getPost
(
)
)
{
//...
}
}
|
在这一章节,我们了解了基础的表单操作,在下一章节将会看到更多基于表单的复杂功能
source: http://www.sunzhenghua.com/magento-admin-module-development-part3-grid-forms-tabs-updatebutton