入门级PHPER&TRANSLATOR

Tutorial: Getting Started with Forms
教程：开始学习表单

Contents
目录
•        1 The Form
•        1 表单
•        2 Creating Form Fields
•        2 建立表单字段
•        3 Completing The Form
•        3 填充表单
•        4 What's Next?
•        4 下一步是什么？
The Form
表单
First thing we need to do is create our form, this could be compared to writing a <form> tag in HTML.
首先要做的是建立表单，这个相当于在 HTML 中写一个 <form> 标签。
var form_employee = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 175,
        buttonAlign: 'right'
});
Creating Form Fields
建立表单字段
Our example form will consist of four fields, name, title, hire_date and active.
例子将包含四个部分，name, title, hire_date 和 active（名字、标题、日期和活动文档）。
The first two, name and title are just plain text fields, so we're going to use a TextField for them.
前两个，名字和标题只是普通的文本字段，所以我们对它们使用一个文本字段。
The important config option here is name, which works just like its HTML counterpart to define the name of the field.
在这里重要的配置选项是名字，它作为它 HTML 的副本来定义字段的名字。
var employee_name = new Ext.form.TextField({
        fieldLabel: 'Name',
        name: 'name',
        width:190
});

var employee_title = new Ext.form.TextField({
        fieldLabel: 'Title',
        name: 'title',
        width:190
});
The next field, hire_date is a date, so we're going to use a DateField which will give us a fancy date picker.
下一个字段，hire_date 是一个日期，所以我们将使用一个提供多样日期选择器的日期字段。
The format config option uses the same date syntax as defined for PHP date formatting. This format string will need to be adjusted to match the format of the date you are using.
格式配置功能使用和 PHP date formatting 里定义一样的日期语法。这个格式字符串需要调整到与您使用的日期格式一致。
var employee_hire_date = new Ext.form.DateField({
        fieldLabel: 'Hire Date',
        name: 'hire_date',
        width:90,
        allowBlank:false,
        format:'m-d-Y'
});
Our last form element active is a boolean value, so let's use a Checkbox.
我们最后的表单元素 active 是一个布林值，所以让我们使用  Checkbox（选择框）。
var employee_active = new Ext.form.Checkbox({
        fieldLabel: 'Active',
        name: 'active'
});
Completing The Form
填充表单
Now we are going to add all of our form fields to a fieldset, which will include these fields in your form. Alternatively you could use add in place of fieldset if you don't want the field set outline.
现在我们要把所有的表单字段添加到一个字段集（fieldset）中，这个字段集包含您表单中的所有这些字段。如果您不希望为字段设置大纲/概要（ outline），您也可以选择使用add 而不是 fieldset（场集）。
form_employee.fieldset(
        {legend:'Employee Edit'},
        employee_name,
        employee_title,
        employee_hire_date,
        employee_active
)
Last but not least, the submit button is added to the form using addButton along with a small bit of error checking for when the button is clicked. Calling render and passing it the id of our div tag will draw our form inside our div tag on the web page.
最后至关重要的是通过使用 addButton 添加到表单的提交按钮，以及点击按钮时检验的一些小的错误。装载 render，并在render 中添加我们的区域标签 id，则可以在网页上的区域标签中绘制表单。
form_employee.addButton('Save', function(){
        if (form_employee.isValid()) {
                Ext.Msg.alert('Success', 'Your form is valid!.');
        }else{
                Ext.Msg.alert('Errors', 'Please fix the errors noted.');
        }
}, form_employee);

form_employee.render('employee-form');
What's Next?
下一步是什么？
While this tutorial does show you how to create a form, there is no back end portion in place to do anything, so the form created in this tutorial is like a car with no engine - it may look pretty, but it wont get you very far.
虽然这个教程教了您怎么建立一个表单，但是没有后端部分支持，所以在这个教程中建立的表单就像是一辆没有引擎的汽车，看起来漂亮，但是不能带您走远。
•        Ext JS Programmer's API Documentation
•        Ext JS Programmer's API Documentation
•        Ext JS User Forums
•        Ext JS User Forums
Retrieved from "http://extjs.com/learn/Tutorial:Getting_Started_with_Forms"
来源于 "http://extjs.com/learn/Tutorial:Getting_Started_with_Forms"



Tutorial: Beginning Using the Grid Component
教程：开始使用网格组件

Step 1ata Definition
第一步：数据定义

First we need to tell the grid what XML element defines each row of data, in this case it's named 'Item' as you can see from the sample XML below.
首先我们必须告知网格 XML 元素为每一行数据定义了什么，在这种情况下将之命名为‘项’，见以下 XML 示例。

Single Row of XML Sample Data
单行 XML 样本数据

<Item>
    <ASIN>0446613657</ASIN>
    <DetailPageURL>
        http://www.amazon[*SNIP*]JVQEG2
    </DetailPageURL>
    <ItemAttributes>
        <Author>Sidney Sheldon</Author>
        <Manufacturer>Warner Books</Manufacturer>
        <roductGroup>Book</ProductGroup>
        <Title>Are You Afraid of the Dark?</Title>
    </ItemAttributes>
</Item>

Set the record in your schema definition (line 8 of the sample code below) to 'Item' so it corresponds to a row in our XML data Then we need to define which column contains the unique identifier by setting the 'id' (line 9 of the sample code below).In our sample data this is the 'ASIN' column.
在架构定义中（下面示例代码第 8 行）为‘项’设置记录使之与 XML 数据中的一行保持一致。然后我们需要通过设置‘id’（下面示例代码第 9 行）来定义哪个栏目包含独立的标识符。在示例数据中将之定义为‘ASIN’ 栏目。

The last part of our data definition are the fields you want to display (line 11 of our sample code).This is just an array with the field names.Make sure these correspond with the element names in your XML data and place them in the order you want the columns displayed in your grid, they don't need to be in the same order they are found in the XML file.
数据定义的最后一部分是您想要显示的字段。（下面示例代码第 11 行）这只是包含域名的一个数组。确保它们与 XML 数据的元素名保持一致并将它们按照您希望的显示顺序排放在网格栏目上，排放顺序无需和 XML 文档相同。

var dataStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
        reader: new Ext.data.XmlReader({
               record: 'Item',
               id: 'ASIN'
           }, [
               'Author', 'Title', 'Manufacturer', 'ProductGroup'
           ])
    });
Step 2: Column Model
第二步：栏目模型
The next step would be defining the Column Model, which simply means setting up some properties for the columns that determine how they are displayed and treated. This is an array containing configuration parameters for each column given in the order of the columns as defined in the data definition's "fields" array from the previous step.
下一步是定义栏目模型，定义模型只需简单地为栏目设置一些属性，继而根据属性求出栏目显示和处理的方式。模型即为一个包含每一个栏目的配置参数的数组，这些栏目在前一步的数据定义的“域”被定义且顺序排放。

Probably the most common configuration variables are going to be header and width, so you will want to make sure to declare at least those two, however width is not required and can be taken care of using the autoWidth/Height functions later on.
可能最常见的可用配置是标头和宽度（ header 和 width），所以您至少希望确保声明它们两种变量，然而，宽度是不做要求的，而且稍后可以使用自动调整宽/高功能。

Sample Column Model
示例栏目模型
var colModel = new Ext.grid.ColumnModel([
        {header: "Author", width: 120, dataIndex: 'Author'},
        {header: "Title", width: 180, dataIndex: 'Title'},
        {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
        {header: "roduct Group", width: 100, dataIndex: 'ProductGroup'}
]);
The last thing we do is to pass the Grid the data store and column model (lines 22-25), render the grid, then load in the data from our data store. That's really all you need to get your grid up and working.
最后我们要做的是向网格传送数据存储和栏目模型（第 22－25 行），执行网格，然后在数据表单中加载数据存储。这实际上就是您建立网格并使之工作的全部工作。
Render it!
执行它！
var grid = new Ext.grid.Grid('mygrid', {
        ds: dataStore,
        cm: colModel
});
grid.render();

dataStore.load();
What's Next?
下一步是什么？
Different readers are available for different data source formats such as XML and JSON, a look into the API documentation will get you started customizing the grid components configuration for your particular needs.
不同的读者适应于不同的数据源格式例如 XML 和 JSON, 请阅读 API 文件熟悉您特别需要的网格组件配置。
•        Ext JS Programmer's API Documentation
•        Ext JS User Forums
•        
•        Ext JS Programmer's API Documentation
•        Ext JS User Forums
Retrieved from"http://extjs.com/learn/Tutorial:Beginning_Using_the_Grid_Component"

来源于http://extjs.com/learn/Tutorial: ... _the_Grid_Component"

Tutorial: Basics of Paging With the Grid Component
教程：网格组件分页基础

Grid Data
网格数据

A paging grid must have a server side element to perform the breaking up of data into pages.
一个编页网格必须拥有一个服务器端元件来将数据填充至网页。

For this example we are using php as the server side language, and a MySQL database with some randomly generated data. The PHP script below is used to retrieve our data and break it up into pages using the limit and start variables that are passed from the paging toolbar
这个例子中我们使用PHP作为服务端语言，同时还使用一个储存任意发生数据的MySQL数据库。下面的PHP脚本用于回收我们的数据并利用编页工具条上的权限和启动变量将之填入网页。

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")
        or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ". (int) $_GET['start'].", ". (int) $_GET['limit'];

$rs_count = mysql_query($sql_count);

$rows = mysql_num_rows($rs_count);

$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
{
        $arr[] = $obj;
}

echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';


We're not going to dig much into the server side code, since it can vary quite a bit with each developer's needs and environment
我们不想在服务端编码上探究太多，因为它会根据开发者的需要和环境变化而有较大的变化。

What's Needed to Make a Paged Grid?
制作一个编页的网格需要什么？

NOTE:
备注：

The example uses ScriptTagProxy only because the data resides on a different domain from the example code.In most cases you will be pulling data from the same domain the code resides on and using HttpProxy.
由于数据储存在与样本编码不同的区域，这个例子只使用ScriptTagProxy。而大多数情况下是从编码数据的区域获取数据并使用HttpProxy。

The only difference in the data Store is the addition of a totalProperty declaration.In our example, we use 'total' which is coming from our server side script with the value for the total number of rows we had before breaking them up into pages.
在数据存储方面惟一不同的是添加了一个totalProperty申明。在我们的例子中，我们使用来源于服务端脚本的‘全部’，其中包含我们之前填入网页的所有行的值。

var ds = new Ext.data.Store({

        proxy: new Ext.data.ScriptTagProxy({
            url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
        }),

        reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'total',
            id: 'id'
        }, [
            {name: 'employee_name', mapping: 'name'},
            {name: 'job_title', mapping: 'title'},
            {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
            {name: 'is_active', mapping: 'active'}
        ])

    });

The Paging Bar
编页条

Adding a paging toolbar to the bottom of the grid pane, and you're almost done.
在网格窗格的底部添加一个编页工具条，你基本上已经完成。

var gridFoot = grid.getView().getFooterPanel(true);

    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 25,
        displayInfo: true,
        displayMsg: 'Displaying results {0} - {1} of {2}',
        emptyMsg: "No results to display"
    });

The last step is to pass the initial start and limit parameters to your data load.
最后一步是将原始启动和权限参数加入你的数据装载。

ds.load({params:{start:0, limit:25}});

A large portion of the time spent setting up paging is going to be your server side environment that handles passing data back and forth with the grid. Once you have that in place, the task of adding paging to a grid can be very simple.
很大一部分用于建立页码的时间将取决于您处理来回通过网格的数据的服务器端的环境  。 只有当您正确设置这个环境时，给一个网格添加页码的任务才变得非常简单。
•        Ext JS Programer's API Documentation
•        扩展 JS 用户论坛
•        Ext JS User Forums
•        扩展JS编程员（程序员）API文件

:P 慢慢看了

这个比较长，比较郁闷的是没有禁用表情。

:@  挖晕……勒
还有表情……