ExtJS3.2.2学习心得-Component组件篇

//列表

var ColModel = new Ext.grid.ColumnModel([
    new Ext.grid.CheckboxSelectionModel({singleSelect:false}),//复选框
    {header:'id',dataIndex:'id',hidden:true},
    。。。
   ]);

//表单

var labelForm = new Ext.form.FormPanel({
 layout:'form',
 baseCls:'x-plain',//去除背景色
 reader:new Ext.data.JsonReader({//这个Reader主要负责把Action中的obj对象的属性值解析出来，
 //其中Action的配置文件中指定返回结果为json:<result type="json" /> 
      	 root:'obj',//Action有属性 Label obj;其中Label（标签）类中的
                       //属性有 int id,String labelName,Label label;三个
      	 idProperty:'id'
      },[//记录与实体的属性映射关系
       {name:'label.id',mapping:'id'},
       {name:'label.labelName',mapping:'labelName'},
      ]),
 items:[{
        xtype:'hidden',//隐藏id 使用这个xtype='hidden'不会占用空间
        id:'label.id',
        name:'label.id'
      },{
       xtype:'textfield',
       fieldLabel:'标签名',
       id:'label.labelName',
       name:'label.labelName',
       allowBlank:false
      }]
   });

//窗口

var labelWindow = new Ext.Window({
 plain:true,
 modal:true,//窗口处于modal模式，也即其他窗口不能被激活，除非关闭该窗口
 closeAction:'hide',//关闭窗口动作发生时 隐藏窗口
 ...... 
}

//表格

var labelGrid = new Ext.grid.EditorGridPanel({
 stripeRows:true,//行间隔不同背景色
 trackMouseOver:true,//鼠标在行移动时 高亮显示
 viewConfig: {forceFit:true},
 /*Ext.grid.EditorGridPanel
autoExpandColumn : String
[b]The id of a column[/b] in this grid that should expand to fill unused space. This value specified here can not be 0.

viewConfig : Object
A config object that will be applied to the grid's UI view. Any of the config options available for Ext.grid.GridView can be specified here. [b]This option is ignored if view is specified.[/b]

Ext.grid.GridView
autoFill : Boolean
Defaults to false. Specify true to have the column widths re-proportioned when the grid is initially rendered. The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. [b]If columns are later resized (manually or programmatically), the other columns in the grid will not be resized to fit the grid width.[/b]

forceFit : Boolean
Defaults to false. Specify true to have the column widths re-proportioned at all times. The initially configured width of each column will be adjusted to fit the grid width and prevent horizontal scrolling. [b]If columns are later resized (manually or programmatically), the other columns in the grid will be resized to fit the grid width. See autoFill also[/b].*/
 listeners:{
    rowdblclick:function(grid,rowIndex,e){//双击打开编辑窗口
      	 var selModel = grid.getSelectionModel();
      	 var row = selModel.getSelected();//获取被选中的行
                 var id = row.get("id");//获取被选中的记录ID
                 ......
      }
 }
 ......
}

//下拉框

{
        xtype:'combo',
        fieldLabel:'标签分类',
        displayField:'labelName',//显示名称
        valueField:'id',//提交时的值
        id:'labelCatId',
        store:labelCatStore,//数据源
        mode:'remote',//第一次触发时 自动查询数据
        triggerAction:'all',
        typeAhead:true,//在编辑框输入数据的时候 匹配列表的值
        allowBlank:false//不能为空
      }

今天就写到这，后面关于Component的都添加到这篇文章。
有空的话，欢迎到 红番薯逛逛