网页开发中，精确定位ExtJs控件的位置的方法。

在项目开发的过程中，一直使用ExtJs进行网页界面的编程，并且已经开发出了一个比较稳定的开发框架来建设信息管理系统的项目。开发的成长过程中我感觉到不管使用什么开发语言，什么架构，面临的最大问题是如果使用这些“工具”来解决项目中常见的问题。不知是不是人长大了，了解的东西虽然越来越多，但是细节的东西到用的时候却是记得不太清楚，因此打算从今天开始把项目中的一些解决问题的过程和学习过程详细记录下来，以便今后查阅。 这一篇文章标题提到的“精确定位ExtJs控件的位置”这种应用需求的应用背景是，某个信息录入的界面，用户或领导要求使用大量的图片去作为背景去修饰这个录入界面，同时各种输入框的放置的位置也是没有规率的（这里的没有规率指的是不是正常的那种一纵横对齐）。比较典型的应用就是一个员工信息的输入界面，以员工卡为背景，而输入框的位置就分布在员工卡上的相应信息的显示位置上，这样的显示方式比较直观，但如果输入控件是使用ExtJs的控件，那开发时还需要一定的技巧。以下就是我一般使用的开发方式：

1、由美工把输入界面的整体效果做好，用photoshop把图牌切割好，输出成html格式。

1.1切割时，重点注意：在要放置输入框的位置一定要切割出足够大的位置，一般高度和宽度要比ExtJs控件的高和宽大2个像素。

1.2切割好后，我们现在得到了一个images文件夹（里面有所需的图片文件）和一个html代码文件。

2、把images里的文件拷贝到自己的项目里，photoshop输入的html文件的body部份往往只有一个table，我们把这个table的代码拷贝下来。准备应用到我们的项目中。

3、在我们的项目的网页的body中加入一个div层并为它起个名字（例如：rootForm），然后把从photoshop里拷过来的代码粘贴到这个层中间，像下面这样(省略的部份就是从photoshop里拷贝的代码)：

4、现在把代码中需要显示的输入框的位置的图片删队掉，然后在那个位置放置一个div层，并起个名字（如 div_控件名称）.

5、编写javascript生成界面： 比如生成一个数字输入框：

new Ext.form.NumberField(

{ id:"PROKFX_KF_Z",

renderTo:div_KF_Z,//这里就是指明了它在哪个图层那里显示出来。

width:60,

value:"1234 });

==========================================================

上面的这些步骤都只是指定了控件的位置，其中最大的问题是如果才能把上面步骤生成的控件的值，像正常的ExtJs应用那样提交到服务器。下面的步骤就是实现这些功能的。

6、在body的最下方再加入一个div层，命名为main。这个图层是用来生成一个Ext.form.FormPanel的，它可以把自己的子元素提交给某个网页。

7、编定javascript

var f = new Ext.form.FormPanel({ id:"mainForm",

applyTo:main,//注意这里，指定了第六步创建 的div层。

border: false,

buttonAlign:"right",

items:[ new Ext.BoxComponent({

el:rootForm //注意这里，指定的这个图层就是包含了所有的输入框控件的。

}) ] });

========================================

8、这样我们就可以使用以面的ExtJs的标准方法来处理数据的提交了。

Ext.getCmp("mainForm").getForm().submit({

url:"指交到哪里",

method:"POST",

success:function(f.r){ } })

注意事项：

1、在rootForm层内直接使用的正常表单控件如：是不会补提交到服务器的，因此可以把这些值直接写丰submit的url后面的参数里，或者使用Ext的hidden控件。