按钮图标 ：
iconCls : 'deleteIcon', --删除
iconCls : 'edit1Icon', --编辑
iconCls : 'addIcon', --新增
iconCls : 'previewIcon',--查询
iconCls : 'arrow_refreshIcon',--刷新
iconCls : 'acceptIcon', --确认
iconCls : 'tbar_synchronizeIcon', --重置
iconCls : 'tbar_synchronizeIcon', --关闭
定义一个数据源store:
静态数据源：
store:new Ext.data.SimpleStore({
fields : ['name', 'code'],
data : [['是', '1'], ['否', '0']]
});
动态数据源：
var dept_store = new Ext.data.JsonStore({
url:'getDept.action', //绑定的URL
root:'ROOT',
totalProperty:'TOTALCOUNT',
fields:[
'deptid','deptname' //默认与数据库字段相同
]
});
或者：var dept_store = new Ext.data.JsonStore({
url:'getDept.action', //绑定的URL
root:'ROOT',
totalProperty:'TOTALCOUNT',
fields:[
{name : 'deptid',mapping:'deptid'}, //映射数据库字段
{name : 'deptname',mapping:'deptname'}
{name : 'enabled',mapping:'enabled'} //下拉选中的数据，可看作选中一行
]
});
动态改变数据源的URL：
store.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});
store.load();
加载store:
store_dept.load();
store加载的事件：
store_dept.on('load',function() {
this.baseParams =setParams(); //设置参数
});
store加载前的事件：
store.on('beforeload', function() {
this.baseParams = myForm.getForm().getValues();
});
获得store的总记录数：store.getCount()
//分页查询数据
function queryByParams(){ //每次查询时，调用这个函数即可
var params = setParams();
store.reload({
params : params
});
}
//设置查询参数
function setParams(){
var obj = myForm.getForm().getValues(); //获取查询表单元素的值
var params = {};
params.start = 0;
params.limit = bbar.pageSize;
params.stime = obj.stime;
params.etime = obj.etime;
return params ;
}
定义自动当前页行号
var rownum = new Ext.grid.RowNumberer({
header : '序号',
width : 60
});
定义选择模型（GRID列前的复选框）
var sm = new Ext.grid.CheckboxSelectionModel({});
sm.on('selectionchange',function() { //选择某一行时，的改变事件
var select = grid1.getSelectionModel().getSelections();
if(select.length<1) {
Ext.getCmp('delete').setDisabled(true);
}else{
Ext.getCmp('delete').setDisabled(false);
}
});
定义GRID列模型
var cm = new Ext.grid.ColumnModel([rownum, sm,
{
header : '部门名称', //列名称
dataIndex : 'deptname', //列绑定的后台字段
editor : new Ext.grid.GridEditor(new Ext.form.TextField({ })), //此时的Grid需定义成EditorGridPanel,则该列才可编辑
width : 150
},
{
header : '部门编号',
dataIndex : 'deptid',
width : 150,
hidden:true //隐藏列
}
/*,
{
header : '创建时间',
dataIndex : 'createtime',
width : 150,
format:'yyyy-MM-dd hh:mm:ss'
renderer:function(date) { //渲染列，根据值来判断显示什么名称
if(date=='0') {
return "<span style='color:red; font-weight:bold'>未审核</span>";
}
if(date=='1') {
return "<span style='color:red; font-weight:bold'>已审核</span>";
}
if(date=='2') {
return "<span style='color:blue; font-weight:bold'>退回</span>";
}
}
} */
]);
分页：
每页显示条数下拉选择框
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()); //当前分页下拉的选中值 20页
// 改变每页显示条数reload数据
pagesize_combo.on('select', function(comboBox) {
bbar.pageSize = parseInt(comboBox.getValue());
number = parseInt(comboBox.getValue());
queryByParams(); //选择页数查询
});
// 分页工具栏 GRID底部工具栏
var bbar = new Ext.PagingToolbar({
pageSize : number, //分页的值
store : store, //绑定的数据源
displayInfo : true,
displayMsg : '显示{0}条到{1}条,共{2}条',
plugins : new Ext.ux.ProgressBarPager(), // 分页进度条
emptyMsg : "没有符合条件的记录",
items : ['-', ' ', pagesize_combo]
});
// GRID表格工具栏，GRID顶部工具栏
var tbar = new Ext.Toolbar({
items : [{
text : '查看详情',
id : 'sk',
disabled : true,
iconCls : 'addIcon',
handler : function() {
showDetails();
}
},{
text : '新增',
id : 'tbi_check',
iconCls : 'previewIcon',
handler : function() {
fnAdd();
}
}, {
text : '刷新',
iconCls : 'arrow_refreshIcon',
handler : function() {
queryByParams();
}
}]
});
// 定义一个grid,并绑定列及工具栏
var grid = new Ext.grid.GridPanel({ //EditorGridPanel 可编辑表格
// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
title : '<span class="commoncss">金蝶出库单收费</span>',
height : 150,
width:300,
id : 'id_grid_sfxm',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm, // 列模型
sm : sm, //复选框
tbar : tbar, // 表格工具栏
bbar : bbar,// 分页工具栏
// autoLoad:true,
viewConfig : {
// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
// forceFit : true
},
loadMask : {
msg : '正在加载表格数据,请稍等...'
}
}
});
FormPanel的定义：
var myForm = new Ext.form.FormPanel({
region : 'north',
title : '<span class="commoncss">请假单查询<span>',
collapsible : false,
border : true,
labelWidth : 60, // 标签宽度
// frame : true, //是否渲染表单面板背景色
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:5 5 5', //-----------手动设置样式
buttonAlign : 'center',
height : 100,
items : [{ // 1
layout : 'column',
border : false,
items : [{//2
columnWidth : .25, // col 1
layout : 'form',
labelWidth : 80, // 标签宽度
defaultType : 'textfield',
border : false,
items : [{ //3
fieldLabel:'开始时间',
name : 'stime',
xtype : 'datefield',
format : 'Y-m-d',
value:new Date().getFullYear()+"-01-01",
anchor : '100%'
}]//3
},{//2
columnWidth : .25, // col 1
layout : 'form',
labelWidth : 100, // 标签宽度
defaultType : 'textfield',
border : false,
items : [
{
fieldLabel:'至',
name : 'etime',
xtype : 'datefield',
format : 'Y-m-d',
value:new Date().getDate()+30,
anchor : '100%'
},{
fieldLabel:'隐藏域不占空间',
name : 'aaaa',
xtype : 'hidden',
anchor : '100%'
},{
fieldLabel:'隐藏域会占空间',
name : 'aaaa',
xtype : 'textfield',
style ：'', -----手动设置样式
hidden:true,
anchor : '100%'
}
]//3
}]//2
}]//1
,
buttons : [{
text : '查询',
iconCls : 'page_findIcon',
handler : function() {
queryByParams();
}
}, {
text : '重置',
iconCls : 'tbar_synchronizeIcon',
handler : function() {
myForm.getForm().reset();
}
}]
});
在Panel的items中还可以显示html格式的信息的：
{
html:"<span id='daysHtmlUpdate'>00000</span>",
style:"Line-height:30px;letter-spacing:2px;padding:10px;margin-left:100px;text-align:left;color:red;font-size:13px;",
anchor:'95%',
border:false
},
grid 的高度根据浏览器高度来定：
autoWidth:true, //宽度自适应
height : document.body.clientHeight-60, //高度根据浏览器高度来定
autoScroll : true, //滚动条
grid的双击事件：
grid.on('rowdblclick', function(grid, rowIndex, event) {
showDetails(); //显示详情
});
window最大化：
autoScroll : true, //滚动条
maximized :true, //最大化
modal : true, //模态窗口
constrain : true,//设置窗口是否可以溢出父容器
pageY : 20 ,//页面定位Y坐标
pageX : document.body.clientWidth/2 - 600/2 , //页面定位X坐标
grid合计控件使用：
summary = new Ext.ux.grid.GridSummary();
//添加一个按钮，自动切换显示或隐藏合计行
var bbar_summary = new Ext.Toolbar({
items : [{
text : '显示或隐藏合计信息',
iconCls : 'addIcon',
handler : function() {
summary.toggleSummary(); //合计行的自动切换显示和隐藏
}
}]
});
在GRID显示合计行，和自动切换显示或隐藏合计行
// 表格实例
var grid1_update_fp = new Ext.grid.GridPanel({
// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
height : 168,
id : 'id_grid',
autoScroll : true,
frame : true,
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm1, // 列模型
plugins : [summary], //在GRID中嵌入合计行
bbar : bbar_summary, // 分页工具栏
loadMask : {
msg : '正在加载表格数据,请稍等...'
}
});
前台ajax,显示合计行的数值：
summary.toggleSummary(true);
summary.setSumValue(Ext.decode(response.responseText)); //
后台设置合计的值：
map.put("price", 1222); //总金额 //这的字段名称与前台的列的名称相对应，即统计某列的值
map.put("amount", 23); //总数量
map.put("success", new Boolean(true));
combox的下拉事件：
var comboDept = new Ext.form.ComboBox({
id:deptID_add',
hiddenName : 'deptname',
fieldLabel : '部门',
emptyText : '请选择...',
triggerAction : 'all',
store : store_dept, //下拉要绑定的数据源
allowBlank : false,
displayField : 'name',
valueField : 'id',
loadingText : '正在加载数据...',
mode : 'local', // 数据会自动读取,如果设置为local又调用了store.load()则会读取2次；也可以将其设置为local，然后通过store.load()方法来读取
forceSelection : true,
typeAhead : true,
resizable : true,
editable : false,
// value : '530101', //设置默认值
anchor : '100%',
listeners : {
'select' : function(combox,record,index){
var v = combox.getValue();//获取当前选中的值，可以做其它处理
//combox中的数据可以看作是一行行的，
var dname = record.data.deptname; //还可以使用这种方式获取数据
}
}
});
combox下拉默认选中第一项：
使combox下拉绑定的数据源默认选中第一项即可，
store_dept.on("load", function() { // 对 ComboBox 的数据源加上 load 事件就好
var vv = store_dept.getAt(0).get('id');
var name = store_dept.getAt(0).get('name')
comboDept.setValue(vv);
comboDept.setRawValue(name);
});
定义BUTTON按钮：
new Ext.Button({
id : 'editcustomer',
name:'editcustomer',
text:'编辑客户信息',
iconCls : 'edit1Icon',//iconCls : 'acceptIcon',
enableToggle: true, //是否允许按钮在弹起和按下两种状态中切换
style: {
marginLeft: '30px' //修改自己定义的样式
},
handler: function (event) {
var v = event.text;
if(v=='编辑客户信息'){//
Ext.getCmp('editcustomer').setText('保存客户信息');
Ext.getCmp('editcustomer').getEl().dom.iconCls='acceptIcon';
Ext.getCmp('editcustomer').getEl().dom.disabled=true;
}else{
Ext.getCmp('editcustomer').setText('编辑客户信息');
Ext.getCmp('editcustomer').getEl().iconCls='edit1Icon';
}
}
})*/
FormPanel 列布局：
var addForm = new Ext.form.FormPanel({
// region : 'north',
// title : '<span class="commoncss">录入<span>',
collapsible : false,
border : true,
labelWidth : 100, // 标签宽度
// frame : true, //是否渲染表单面板背景色
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:15 5 5', // 表单元素和表单面板的边距
buttonAlign : 'center',
height : 180,
items : [{ //最外层采用的form布局
fieldLabel:'测试',
name : 'test',
id :'testAdd',
allowBlank : false,
xtype : 'textfield',
anchor : '50%'
},
{ // 1 这里开始采用列布局
layout : 'column',
border : false,
items : [{//2
columnWidth : .25, // 列 1
layout : 'form',
labelWidth : 80, // 标签宽度
defaultType : 'textfield',
border : false,
items : [new Ext.form.ComboBox({
hiddenName:'deptid',
id : 'deptid_add',
fieldLabel:'部门',
emptyText:'请选择..',
triggerAction:'all',
store:storeDept,
displayField:'text',
valueField:'value',
loadingText:'正在加载数据...',
mode:'local',
forceSelection:true,
typeAhead:true,
resizable:true,
editable:false,
anchor:'100%'
}),{ //3
fieldLabel:'开始时间',
name : 'starttime',
id :'starttimeAdd',
allowBlank : false,
xtype : 'datetimefield',
format : 'Y-m-d H:i:s',
anchor : '50%'
}]//3
},{//2
columnWidth : .25, // 列 2
layout : 'form',
labelWidth : 80, // 标签宽度
defaultType : 'textfield',
border : false,
items : [,{ //3
fieldLabel:'员工名称',
name : 'username',
id :'username_add',
allowBlank : false,
xtype : 'textfield',
anchor : '50%'
},{ //3
fieldLabel:'外出结束时间',
name : 'endtime',
id :'endtimeAdd',
allowBlank : false,
xtype : 'datetimefield',
format : 'Y-m-d H:i:s',
anchor : '50%'
}]//3
}]//2 在此新增列
}]//1
});
{
xtype:'combo',
store: childStore,
valueField :"id",
displayField: "mc",
//数据是在本地
mode: 'local',
forceSelection: true,//必须选择一项
emptyText:'请选择子分类...',//默认值
hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name
editable: false,//不允许输入
triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
//allowBlank:false,//该选项值不能为空
fieldLabel: '选择',
id : 'child_id',
name: 'child',
width: 400
}
下拉框提示信息：
var resultTpl_add = new Ext.XTemplate(
'<tpl for="."><div ext:qtip="提示：编号={deptid}；名称={deptname} class="x-combo-list-item">{deptid}----{deptname}</div></tpl>'
);
var deptComb = new Ext.form.ComboBox({
fieldLabel : '部门名称',
allowBlank : false,
hiddenName:'deptid',
id : 'dept_add',
// emptyText : '请选择...',
store : deptStore,
triggerAction : 'all',
mode:'local',
valueField : 'deptid',
displayField : 'deptname',
allowBlank : false,
forceSelection : true,
// typeAhead : true,
pageSize:8, //下拉默认显示的页数
listWidth:600 , //下拉的显示宽度
width : 300,
// hideTrigger:true, //是否显示下拉图标
tpl: resultTpl_add, //下拉时，绑定提示信息的模板
onTriggerClick:function(){ //下拉分页查询
Ext.getCmp('product_add').focus();
storeDept.load({
params:{
start : 0,
limit : psize_add
}
});
}
});
EditorPanel 行编辑 中的下拉框，选中时不显示名称的问题：
var colM = new Ext.grid.ColumnModel([sm,rownum,{
header:'编号',
dataIndex:'id',
hidden:true
},{
header : '编号', // 列标题
dataIndex : 'code', // 数据索引:和Store模型对应
hidden : true,
// sortable : true,
// editor : new Ext.grid.GridEditor( deptComb),
// renderer: function(val){ //------------------------------------下拉选中时显示名称而不是ID
// if(val==""||val==null){
// return ;
// }
// return deptStore.queryBy(function(rec){
// if(rec.data.deptid==val){
// return true;
// }
// else{
// return false;
// }
// }).itemAt(0).get('deptname');
// },
width : 220
},
Grid列表显示图标列，而不是数据：
//----------------------------------------------------------------------------------------- 生成一个图标列
function iconColumnRender_add(value) {
return "<a href='javascript:void(0);' ><img src='" + webContext
+ "/resource/image/ext/delete.png'/></a>"; //指定图标路径
}
var colM = new Ext.grid.ColumnModel([sm,rownum,
{
// header : '操作',
// dataIndex : 'del',
// renderer : iconColumnRender_add, //渲染的图标
// width : 50// 列宽
// }
CARD布局：
//qForm 1 的属性
var qForm = new Ext.form.FormPanel({
id:'qForm',
name:'qForm',
region : 'north',
title : '<span class="commoncss">货物收款查询条件<span>',
collapsible : true,
border : true,
labelWidth : 50, // 标签宽度
// frame : true, //是否渲染表单面板背景色
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:10 5 0 5', // 表单元素和表单面板的边距
buttonAlign : 'center',
height : 130,
buttonAlign : 'center',
items : [ {.........}]
//GRID属性
var grid = new Ext.grid.GridPanel({
title : '<span class="commoncss">test</span>',
height : 500,
autoWidth:true,
id : 'id_grid',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm, // 列模型
sm : sm,
tbar : tbar, // 表格工具栏
bbar : bbar,// 分页工具栏 。。。。。。
//注：qForm2，grid2与qForm,grid属性值类似
//一个PANEL存放一个页面
panel_1= new Ext.Panel({ //------------------------------------------货款列表PANEL
layout : 'form',
id : 'list1',
border:false,
autoWidth:true,
// frame:true,
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:5 5 5;'//设置面板体的背景色
},
items : [qForm,grid]
});
panel_2= new Ext.Panel({ //-----------------------------------------货物发票列表PANEL
layout : 'form',
id : 'list2',
border:false,
autoWidth:true,
// frame:true,
defaults : {//设置默认属性
bodyStyle:'background-color:#FFFFFF;padding:5 5 5;'//设置面板体的背景色
},
items : [qForm2,grid2]
});
//将两个页面放到一个PANEL中，以便切换
tabpanel_list=new Ext.Panel({
//renderTo:'order_list',
layout:'card',
activeItem:0,
width:'100%',
height:'100%',
autoScroll:true,
items:[
panel_1,panel_2
]
});
viewport_order_list = new Ext.Viewport({
enableTabScroll : true,
layout:'fit',
items:[ tabpanel_list]
});
//切换TAB页面的方法
function fnBack_list(){//----------------------点击返回---列表页面
tabpanel_order_list.layout.setActiveItem('list1');// 这里指定要跳转的panel页面的ID名称
}
function fnCkd_list(){//----------------------点击返回---出库单页面
tabpanel_order_list.layout.setActiveItem('list2');//0
}
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
