20140805&20140806

</pre>1、 如何控制Ext actionColumnItem的图片显示（即不同的值显示不同的图片）</p><p></p><p><strong>使用actionColumnItem的getClass方法，该方法的作用是返回用于渲染该item的CSS样式(class)</strong></p><p></p><pre class="javascript" name="code">getClass:function(v, metadata, r, rowIndex, colIndex, store)
{
    if(r.get('status'))
return 'Frozen';
    else
       return 'noFrozen';
}

   所以还要在CSS文件里添加：

  

 .Frozen{background:url('Frozen.jpg');height:20px;width:20px}
.noFrozen{background:url('NoFrozen.jpg');height:20px;width:20px}

同时要不忘记在Ext渲染的html页面中引用这个CSS文件

<link rel="stylesheet" href="ext.css"type="text/css"></link>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

2、 在Ext store的某行数据被更新时，如何将更新发送到服务器，服务器的servlet又如何接受该json值

浏览器：

在store定义时添加如下代码

proxy: {
      type: 'ajax',//与服务器交互的方式为ajax
      api: {
             read: '../getUserList',//store将从getUserList这个servlet中读取数据
             update: '../updateUserList'//当store更新时，store会将更新数据发送到这个servlet
          },
      url:'../getUserList',
      reader:{
                type: 'json',//store读取服务器数据的方式为json
                root: 'user'//json数据的根
             }
      }

最后在store改变时要调用store.sync();

服务器:

updateUserList.java(servlet)
package servlet;
importhibernate.Model.User;
 importjava.io.PrintStream;
importjava.lang.reflect.Type;
 importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Dao.managerOption;
importcom.google.gson.Gson;
publicclass updateUserList extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response)
                    throws ServletException,java.io.IOException {
           request.setCharacterEncoding("UTF-8");
    Gsongson=new Gson();//谷歌出的Gson包，用以json与Java对象之间的转化
Useruser=gson.fromJson(request.getReader(),User.class);//通过request.getReader()获取对request的读取流
           managerOption.updateUser(user);
           response.setContentType("Text/json;charset=GBK");
           PrintStream out = newPrintStream(response.getOutputStream());
           out.print("{\"success\":true}");
}
}

Google Gson包下载地址

http://download.youkuaiyun.com/download/o_ohaha/7724593

 

3、 对Ext gridPanel进行监听，并在某一行被选中时将它的record显示在Form中，对数据进行修改后将Form.record更新到store原来的record中，最后store再与服务器同步

1)      对gridPanel添加cellClick方法

onStaffListCellClick:function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
//获取form并将record填充到它里面去
Ext.getCmp('alterStaffForm').loadRecord(record);
}

2)      AlterStaffForm代码：

{
xtype: 'form',
id: 'alterStaffForm',
bodyPadding: 10,
items: [
{
xtype:'textfield',
anchor: '100%',
fieldLabel: '工号',
name: 'uid'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '姓名',
name: 'uname'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '性别',
name: 'sex'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '年龄',
name: 'age'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '电话',
name: 'tel'
},
{
xtype:'textfield',
anchor: '100%',
fieldLabel: '邮箱',
name: 'email'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: '职位',
name: 'position'
},
{
xtype: 'button',
handler: function(button, e)
{
var record=this.up('form').getRecord(),
form=this.up('form').getForm();
if (form.isValid())
{
form.updateRecord(record);
record.store.sync();
}
},
margin: '\'0 0 0240\'',
text: '保存'
}
]
}

4、  新增User，通过addUserForm获取数据，并将Form提交到servlet(区别于刚才的将update数据更新到store再由store于服务器同步)，由于addUserForm布局和alterUserForm布局类似，故只贴出button的响应方法：

{
xtype: 'button',
handler:function(button, e)
{
var form=this.up('form').getForm();
If(form.isValid())
 {//这里指的是填充form的数据是否满足指定类型
form.submit(
{
success:function(form,action)
{
varstore=Ext.getCmp('staffList').getStore();  
store.reload();
}
});
}
},
margin: '\'0 0 0 240\'',
text: '保存'
}

服务器addUser.java(servlet)

String uid=request.getParameter("uid");
String uname=request.getParameter("uname");
String sex=request.getParameter("sex");
int age=Integer.parseInt(request.getParameter("age"));
String tel=request.getParameter("tel");
String email=request.getParameter("email");
String position=request.getParameter("position");
User temp=newUser(uid,uname,sex,age,tel,email,position,"123456",true);
managerOption.addUser(temp);