Ext相关

1：EXT表格（不在窗体内的情况）

    1)创建模型：

        Ext.define( 'modelid', {extend : 'Ext.data.Model', fields : ['f1','f2','f3','f4']});

    2)创建数据源

    var data_source= Ext.create('Ext.data.JsonStore', {

pageSize : 20,                                                                   --分页大小

model : 'modelid',                                                              --模型id

proxy : {

type : 'ajax',

url : '/xxx/xxx/xxx/xx',

reader : {

root : 'items',                                                    --一个List保存的实体

totalProperty : 'results'                                    --实体个数

}

}

});

    3)序列号（如果需要）

     /* 定义页码序号 */

Ext.grid.PageRowNumberer = Ext.extend(

Ext.grid.RowNumberer,

{

renderer : function(value, cellmeta, record, rowIndex, columnIndex, store) {

return (store.currentPage - 1) * store.pageSize + rowIndex + 1;

}

}

);

    4)创建多选按钮

var box = Ext.create('Ext.selection.CheckboxModel', { checkOnly : false }); 

    5)创建图表

     gird = Ext.create('Ext.grid.Panel', {

width : 500,

height : 460,

store :  data_source ,

loadMask : true,

selModel : box,                                                                             多选按钮

viewConfig : { id : 'xxid', trackOver : false, stripeRows : false },  一个页面有两个gird,这里就不要，否则有问题。

columns : [

{ id : 'xxx', dataIndex : 'xxx', hidden : true },

Ext.create('Ext.grid.PageRowNumberer', { header : '序号', width : 40 }),

{ text : "aaa", dataIndex : 'f1', width : 168 },

{ text : "bbb", dataIndex : 'f2', renderer : format_f2, flex : 20 },

{ text : "aaa", dataIndex : 'f3', width : 168 },

{ text : "aaa", dataIndex : 'f4', width : 168 }

]

 

/*函数f2*/

function f2(value , p , val){

return val.get('status') == '1' ? announcement_common.i18n.enabled : announcement_common.i18n.disabled;

}

    6)创建分页栏

bbar : Ext.create('Ext.PagingToolbar', {

store :  data_source ,

plugins : [

Ext.create('Ext.ux.ComboPageSize', {

prefixText : '每页', postfixText : '条'

})

],

displayInfo : true,

beforePageText : '第',

displayMsg : '当前显示 {0} - {1} 总共 {2}条记录 ',

emptyMsg : "无记录",

beforePageText : '第',

afterPageText : '页/共{0}页',

refreshText : '刷新',

nextText : '下一页',

firstText : '首页',

prevText : '上一页',

lastText : '尾页'

})

    7)展示

renderTo : 'list'                       --list表示一个div的ID

    8)加载数据前的操作

data_source.on(

'beforeload',

function (store, options) {

var new_params = { title : Ext.get('announcement_key').dom.value }; 获取参数，以title为key  Ext.apply(store.proxy.extraParams, new_params);

gird.getSelectionModel().deselectAll(); 此布操作的作用是将多选按钮状态置为不选

}

);

    9)加载数据

store_Res.load();

 

 

2：Ext表格（窗体中）

1)重复以上除步骤7的8个步骤

2)创建窗体

wins = Ext.create('Ext.window.Window', {

title:'xxxx',

width : 620, height : 560, layout: 'fit',

items: [gird],

dockedItems : [{

xtype : 'toolbar',

dock : 'top',

layout : { pack : 'left' },

items : [

'输入查询条件',

{ id : '搜索框的id', xtype : 'textfield', name : '搜索框的name' },

{ text : '搜索', iconCls : 'icon_select', handler : function() {点击搜索按钮做的事情} }

]

}],

buttons : [

{ text : '确定', xtype : 'button', listeners : { 'click' : function(btn) {点击确定按钮做的事} } },

{ text : '返回', xtype : 'button', listeners : { 'click' : function(btn) {wins.hide(); }}} 

]

})

3)显示窗体

wins.show();

 

注意事项：关于窗体加载时候，要先判断下窗体是否存在，存在就直接wins.show()，不存在才重新创建，不然多次创建窗体会有问题。

相关问题：在窗体中搜索，数据加载成功后，分页导航不是第一页，而是你搜索数据时候的位置，这个时候要加上gird.store.currentPage = 1

 

 

不定期更新···