ext.js、grid（分页、菜单、列表）
Grid Panel 仅仅用来展现数据，数据的获取和保存交给使用Proxy的 Store来处理；不知道大家都是用什么软件来写的哈；我用的是ibuilder和notepad++来修改代码；这个层级看的特别的清楚；先说一下grid页面怎么写！
我在写grid的时候一般都会将它分为3个部分；首先是menu菜单；然后是列表；在之后就是分页；grid下面菜、单列、表数据都是平级的；在ext.js中；每一部分起的名字也很重要！列表的名字叫columns；分页的名字叫dockeditems;菜单的名字叫tbar；
这些名字是创建的文件夹的名字；里面就可以写相对应的字段、按钮等~每个的名字都不一样需要按照文档的来写。
Ext.define("Flowup",{extend:"Ext.panel.Panel",initComponent : function()
//整个页面最外面panel面板
{ var me = this; me.store=Ext.create("Flowup.Store");Ext.apply(this,{i:"Flowup",layout:"vbox",items: [{xtype:"form",i:"Flowup.items.form",layout:"column",defaults:{
labelWidth: 60,
labelAlign: "right",
columnWidth: 0.25,
margin: "10 5 5 5"
}
//defaults里面写的样式；frame为 Panel 填充画面（就是页面变成蓝色）,layout是布局我最外面用的是vbox布局（此布局允许元素以垂直方式分布）
,width:"100%",frame:"true",height:130,buttons:
//xtype是属性的名字；i是文件夹里的名字iconCls是button里面的图标名字；listeners添加一个点击事件
[{xtype:"button",i:"Flowup.items.form.buttons.Seek",layout:"column",defaults:{margin: "10 5 5 5"},text:"查询",iconCls:"seek",listeners:{click:function (_me) {
var form = _me.up("form");
var searchValues = form.getForm().getValues();
Ext.apply(me.store.proxy.extraParams, searchValues);
me.store.removeAll();
me.store.loadPage(1);
}
} },{xtype:"button",i:"Flowup.items.form.buttons.Delete",layout:"column",defaults:{margin: "10 5 5 5"},text:"重置",iconCls:"clear" }],items: [{xtype:"datefield",i:"Flowup.items.form.items.Dict",layout:"column",defaults:{margin: "10 5 5 5"},fieldLabel:"开始时间",name:"sdate",value:new Date() },{xtype:"datefield",i:"Flowup.items.form.items.Edate",layout:"column",defaults:{margin: "10 5 5 5"},fieldLabel:"结束时间",name:"edate",value:new Date() },
//editable是让下拉框不能点击输入；combobox是下拉框属性；fieldLabel：显示名字；displayField：从表单导入数据展示一个值，valuefield是相关的数据值名称绑定到ComboBox（下拉框）；
{xtype:"combobox",i:"Flowup.items.form.items.Mode",layout:"column",defaults:{margin: "10 5 5 5"},editable:false,fieldLabel:"跟进方式",name:"mode",displayField:"name",store:Ext.create("Ext.data.Store", {
fields: ["name", "value"],
autoLoad: true,
proxy: {
type: "ajax",
url: "basis/system/DictionaryService/getByParent?parent=客户管理|跟进方式",
reader: {
type: "json",
root: "data"
}
}
})
,valueField:"value" },{xtype:"combobox",i:"Flowup.items.form.items.Result",layout:"column",defaults:{margin: "10 5 5 5"},editable:false,fieldLabel:"跟进状态",name:"result",displayField:"name",store:Ext.create("Ext.data.Store", {
fields: ["name", "value"],
autoLoad: true,
proxy: {
type: "ajax",
url: "basis/system/DictionaryService/getByParent?parent=客户管理|跟进状态",
reader: {
type: "json",
root: "data"
}
}
})
,valueField:"value" },{xtype:"combobox",i:"Flowup.items.form.items.User",layout:"column",defaults:{margin: "10 5 5 5"},editable:false,fieldLabel:"跟进人",name:"user",displayField:"name",store:Ext.create('Ext.data.Store', {
proxy:{
type: "ajax",
url: "basis/admin/AdminService/findAll",
reader: {
type: "json",
root: "data",
totalProperty: "totalCount"
}
}
,remoteSort:true
,autoLoad:true
,sorters:{
property: 'id',
direction: 'DESC'
}
,fields:["id","username","password","name","sex","mobile","phone","mail","type","agentnumber","section","homeaddress","usable","index","organization"]
})
,valueField:"value" },{xtype:"combobox",i:"Flowup.items.form.items.RelationId",layout:"column",defaults:{margin: "10 5 5 5"},editable:false,fieldLabel:"客户",name:"relationId",displayField:"name",store:Ext.create('Ext.data.Store', {
proxy:{
type: "ajax",
url: "crm/customer/CustomerService/show",
reader: {
type: "json",
root: "data",
totalProperty: "totalCount"
}
}
,remoteSort:true
,autoLoad:true
,sorters:{
property: 'id',
direction: 'DESC'
}
,fields:["id","name", "tel1","tel2", "email1", "email2", "website" , "fax" , "source", "level", "industry", "type" , "income" ,
"employee", "province", "city", "street", "zipcode" , "description" , "share" , "admin" , "parent"]
})
,valueField:"value" },{xtype:"textfield",i:"Flowup.items.form.items.Content",layout:"column",defaults:{margin: "10 5 5 5"},editable:false,fieldLabel:"跟进内容",name:"content" }] },{xtype:"grid",i:"Flowup.items.Grid",width:"100%",store:me.store,autoScroll:true,tbar: [{xtype:"button",i:"Flowup.items.Grid.tbar.Add",store:me.store,text:"添加",iconCls:"add",maxWidth:60,listeners:{click:function(_me, record, item, index, e, eopts) {
Ext.create("Flowup.Window",{
parent:me.down("grid")
}).show();
}
} },{xtype:"button",i:"Flowup.items.Grid.tbar.Edit",store:me.store,text:"编辑",iconCls:"edit",maxWidth:60,listeners:{click:function(_me, record, item, index, e, eopts) {
var select = _me.up("grid").getSelectionModel().getSelection();
if (select.length > 0) {
Ext.create("Flowup.Window",{
parent:me.down("grid"),
record : select[0],
recordpro : me.recordpro
}).show();
}else{
Ext.MsgHelper.info("请选择一行数据!");
return false;}
}
} },{xtype:"button",i:"Flowup.items.Grid.tbar.Delete",store:me.store,text:"删除",iconCls:"delete",maxWidth:60,listeners:{click:function(_me, e, eopts) {
var select = _me.up("grid").getSelectionModel().getSelection();
if (select.length == 0 || select.length > 1) {
Ext.MsgHelper.info("请选择一行数据!");
return false;
}
var id = select[0].get("id");
Ext.MsgHelper.confirm("确认要删除选中的数据吗?",function(y){
if(y == "yes"){
Ext.Ajax.request({
url: "crm/customer/flowup/FlowupService/delete",
params: {
id: id
},
method: "POST",
success: function(response, action) {
var result = Ext.decode(response.responseText);
if (result.success) {
Ext.MsgHelper.info(result.msg);
var store=_me.up("grid").getStore();
store.removeAll();
store.load();
} else {
Ext.MsgHelper.error(result.msg);
}
},
failure: function(response, action) {
Ext.MsgHelper.error(Ext.decode(response.responseText).msg);
}
});
}});
}
} }],columns: [{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.Executiotime",renderer:function(value) {
if (value) {
var d = new Date(value);
return Ext.DateHelper.format(d);
}
}
,dataIndex:"executiotime",width:"10%",store:me.store,text:"跟进日期",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} },{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.Deadline",renderer:function(value) {
if (value) {
var d = new Date(value);
return Ext.DateHelper.format(d);
}
}
,dataIndex:"deadline",width:"10%",store:me.store,text:"跟进期限",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} },{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.Type",dataIndex:"type",width:"10%",store:me.store,text:"跟进方式",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} },{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.Content",dataIndex:"content",width:"10%",store:me.store,text:"跟进内容",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} },{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.Result",dataIndex:"result",width:"10%",store:me.store,text:"跟进状态",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} },{xtype:"gridcolumn",i:"Flowup.items.Grid.columns.User",dataIndex:"user",width:"10%",store:me.store,text:"跟进人",listeners:{afterrender:function(_me) {
_me.flex = 2;
}
} }],dockedItems: [{xtype:"pagingtoolbar",i:"Flowup.items.Grid.dockedItems.Paging",displayMsg:"第{0}到{1}条，共{2}条数据",displayInfo:true,store:me.store,items: [{xtype:"button",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize",displayMsg:"第{0}到{1}条，共{2}条数据",displayInfo:true,store:me.store,iconCls:"pagesize",menu: {xtype:"menu",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,minWidth:80,store:me.store,items: [{xtype:"menucheckitem",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu.items.default",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,store:me.store,text:25,group:"page" },{xtype:"menucheckitem",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu.items.fifty",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,store:me.store,text:50,group:"page" },{xtype:"menucheckitem",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu.items.Hun",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,store:me.store,text:100,group:"page" },{xtype:"menucheckitem",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu.items.Fivehun",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,store:me.store,text:500,group:"page" },{xtype:"menucheckitem",i:"Flowup.items.Grid.dockedItems.Paging.items.Pagesize.menu.Menu.items.Tho",displayMsg:"第{0}到{1}条，共{2}条数据",defaults:{handler: function(e){me.store.pageSize = e.text;} },displayInfo:true,store:me.store,text:1000,group:"page" }] } }],listeners:{afterrender:function(_me){
_me.dock = "bottom";
}
//_me.dock这个是靠下面显示；这个是加给分页的
} }],listeners:{afterrender:function(_me){
_me.flex =8;
var btn = me.query("[i=Flowup.items.form.buttons.Seek]")[0];
btn.fireEvent("click", btn);
}
,itemdblclick:function(_me, record, item, index, e, eOpts) {
var editBtn = me.down("button[iconCls=edit]");
editBtn.fireEvent('click', editBtn);
}
} }]});this.callParent();}});
这是我项目整个页面的代码；希望大家看了之后会对大家有帮助！
下面附上页面效果图片！
