Ext 学习

Ext  ajax提交

 Ext.Ajax.request({

url : '<%=rootPath%>/structPath.action',

params : { param1: value,param2 : value2} ,

success : function(response, options) {

Ext.Msg.alert("",response.responseText);

}

,

failure:function(resposne){

}

  });

控件的获取

var s = new Ext.form.FormPanel({
                id:'uploadForm',
                fileUpload : true,
                labelWidth : 150,
                style : 'border:none solid gray',
                frame : true,
                method:'post',
                enctype:'multipart/form-data',
                width : 400,
                items : [ {
                    xtype : 'textfield',
                    fieldLabel : 'Locate Content to Upload',
                    name : 'uploadFormElement',
                    inputType : 'file'
                } ],
                buttons : [ {
                    text : 'Upload',
                        handler:function submitValid(){
                        var uploadform=Ext.getCmp("uploadForm").getForm(); /* 通过 ID 获取Form*/
                        uploadform.submit( {
                            url:'<%=rootPath%>/fileUpload',
                            success:function sucess(form,action){                         
                                 xxGridPanel.getStore().reload();  /* 数据源从新加载 */
                                 uploadform.findField("uploadFormElement").setValue(""); /*清除选择的内容    在Form控件中，通过findField获取Form容器的元件*/
                            },
                            failure:function fail(form,action){
                                 uploadform.findField("uploadFormElement").setValue("");
                            }
                            }
                        )
                        }
                }]

})

设置Grid行事件及获取每行的记录和记录里面的字段

var PDGridPanel = new Ext.grid.GridPanel({
                
                id:'xxGrid',
                store : xxStore,
                stripeRows : true,
                cm : xxColumn,
                style : "border:none",
                height : 400,
                bbar : new Ext.Toolbar({
                    height : '25',
                    baseCls : 'co'
                }),
                viewConfig : {
                    forceFit : true,
                    scrollOffset : 0
                }
               
                listeners:{   

/* row 行号，grid里含有store,通过store可以拿到record,通过record可以拿到字段 */  

  rowdblclick : function(grid,row){

                           alert(grid.getStore().getAt(row).get("UUID.value"));                   
                       },  
                       rowclick:function(grid,row){
                           alert(grid.getStore().getAt(row).get("UUID.value"));
                        
                       }  
                }
               
            });

对某列进行事件设置，设置store的date数据类型的格式

var xxColumn = new Ext.grid.ColumnModel(
                    [
                            {
                                header : '<span style="color: #2d748b;font-weight: bold;">xxx</span>',
                                dataIndex : 'UUID.value',
                                hidden:true            /* 隐藏该列，主要为点击时提供参数*/
                            },
                            {
                                header : '<span style="color: #2d748b;font-weight: bold;" >xxx</span>',
                                dataIndex : 'name',
                                sortable : true,
                                width : 90,

                                  /*对每一列进行事件控制*/
                                renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                                    
                                    var str = '<a href="#" style="TEXT-DECORATION:none"><span style="color: #2d748b;font-weight: bold;" οnclick=\"xxxx(\''+record.data["UUID.value"]+'\')\")>xxxx</span></a>';                    
                                    return str;
                                }
                            },

{
                                header : '<span style="color: #2d748b; font-weight: bold;">DATE</span>',
                                dataIndex : 'xxxDate',
                                sortable : true,
                                width : 70
                                ,
                                 renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')
                                
                            }

]

)

Store 数据的获取

store = new Ext.data.Store({                  
            proxy: new Ext.data.HttpProxy({ url: '<%=rootPath%>/xxx.action' }),  
            reader: new Ext.data.JsonReader( {     
                root: 'root',  
               fields: ['xx','xx','xx','xx','xx','xx','xx','xx','xx']  
                        
             })  
        });

分页

var ds = new Ext.data.Store({
 
proxy: new Ext.data.ScriptTagProxy({
url: 'xxxx.action'
}),
 
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'}
])
 
})

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"
});

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