G4界面

/**

 * 团聊天记录管理

 * 

 * @author 

 * @since 

 */

Ext.onReady(function() {

// 复选框

var sm = new Ext.grid.CheckboxSelectionModel({

singleSelect: true  

});

// 定义自动当前页行号

var rownum = new Ext.grid.RowNumberer({

header : 'NO',

width : 28

});

//*****************************团管理主界面START****************************

// 定义列模型

var cm = new Ext.grid.ColumnModel([rownum, sm, 

        {

header : 'id', // 列标题

id:'tourgroupid',

value:1,

dataIndex : 'id', // 数据索引:和Store模型对应

hidden : true // 隐藏列

}, {

header : '团名称', 

dataIndex : 'groupname',

sortable : false,

width : 100 

}, {

header : '出发时间', 

dataIndex : 'datetime',

sortable : false,

width : 140 

}, {

header : '操作', 

dataIndex : 'group_leader',

sortable : false,

width : 100,

renderer: function (value, meta, record) {

            var formatStr = "<a href='#'>查看详情</a>"; 

            var resultStr = String.format(formatStr);

            return "<div class='controlBtn'>" + resultStr + "</div>";

        } .createDelegate(this),

        css: "text-align:center;",

        sortable: false

}]);

/**

* 数据存储

*/

var store = new Ext.data.Store({

// 获取数据的方式

proxy : new Ext.data.HttpProxy({

url :'tourGroupManager.do?reqCode=querAllTourGuideGroups'

}),

// 数据读取器

reader : new Ext.data.JsonReader({

totalProperty : 'TOTALCOUNT', // 记录总数

root : 'ROOT' // Json中的列表数据根节点

}, [{

name : 'id' // Json中的属性Key值

}, {

name : 'groupname'

},{

name : 'datetime'

}])

});

// 每页显示条数下拉选择框

var pagesize_combo = new Ext.form.ComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new Ext.data.ArrayStore({

fields : ['value', 'text'],

data : [[10, '10条/页'], [20, '20条/页'],

[50, '50条/页'], [100, '100条/页'],

[250, '250条/页'], [500, '500条/页']]

}),

valueField : 'value',

displayField : 'text',

value : '20',

editable : false,

width : 85

});

var number = parseInt(pagesize_combo.getValue());

// 改变每页显示条数reload数据

pagesize_combo.on("select", function(comboBox) {

bbar.pageSize = parseInt(comboBox.getValue());

number = parseInt(comboBox.getValue());

store.reload({

params : {

start : 0,

limit : bbar.pageSize

}

});

});

// 分页工具栏

var bbar = new Ext.PagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '显示{0}条到{1}条,共{2}条',

plugins : new Ext.ux.ProgressBarPager(), // 分页进度条

emptyMsg : "没有符合条件的记录",

items : ['-', '&nbsp;&nbsp;', pagesize_combo]

});

// 表格工具栏

var tbar = new Ext.Toolbar({

items : ['起始时间' , {

xtype : 'datetimefield',

id:'startDate',

fieldLabel : '起始时间', // 标签

name : 'startDate', // name:后台根据此name属性取值

anchor : '100%' // 宽度百分比

}, '结束时间' , {

xtype : 'datetimefield',

id:'endDate',

fieldLabel : '结束时间', // 标签

name : 'endDate', // name:后台根据此name属性取值

anchor : '100%' // 宽度百分比

},'团名称' , {

xtype : 'textfield',

id : 'keywords',

name : 'keywords',

emptyText : '请输入团名称',

width : 150,

enableKeyEvents : true,

}, {

text : '查询',

iconCls : 'page_findIcon',

handler : function() {

queryByConditonsKey();

}

}]

});

// 是否默认选中第一行数据

bbar.on("change", function() {

// grid.getSelectionModel().selectFirstRow();

});

// 页面初始自动查询数据

store.load({params : {start : 0,limit : bbar.pageSize}});

// 翻页排序时带上查询条件

store.on('beforeload', function() {

this.baseParams = {

};

});

// 表格右键菜单

var contextmenu = new Ext.menu.Menu({

id : 'theContextMenu',

items : [{

text : '查看详情',

iconCls : 'previewIcon',

handler : function() {

// 获取当前选择行对象

var record = grid.getSelectionModel()

.getSelected();

var xmmc = record.get('xmmc');

Ext.MessageBox.alert('提示', xmmc);

}

}, {

text : '导出列表',

iconCls : 'page_excelIcon',

handler : function() {

// 获取当前选择行对象

var record = grid.getSelectionModel()

.getSelected();

var xmmc = record.get('xmmc');

Ext.MessageBox.alert('提示', xmmc);

}

}]

});

// 表格实例

var grid = new Ext.grid.GridPanel({

// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体

title : '<span class="commoncss">团管理</span>',

margins : '3 3 3 3',

height : 500,

frame : true,

autoScroll : true,

region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局

store : store, // 数据存储

stripeRows : true, // 斑马线

cm : cm, // 列模型

sm : sm, // 复选框

tbar : tbar, // 表格工具栏

bbar : bbar,// 分页工具栏

viewConfig : {

// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况

// forceFit : true

},

loadMask : {

msg : '正在加载表格数据,请稍等...'

}

});

//*****************************团管理主界面END****************************

var viewport = new Ext.Viewport({

layout : 'border',

items : [grid]

});

})

点击按钮：

// grid.on('cellclick', function (grid, rowIndex, columnIndex, e) {  

// var btn = e.getTarget('.controlBtn'); 

// if (btn) { 

//     var row = grid.getSelectionModel().getSelected(); //得到选择所有行

    var lineid=row.get('line_id');

    var courseid=row.get('id');

//     storeB.load({

// params : {

// start : 0, 

// limit : bbar.pageSize,

// }

// });

//     queryForm.getForm().loadRecord(row);//****************************页面打开传值

//     quertWin.show();

// }

// });