【extjs3.2】grid重新加载jsonstore后,点击grid上的分页组件,grid不刷新

页面上有个combobox,grid,grid上有个pageToolbar用于分页。页面加载时,会将json数据加载到grid和pageToolbar里。
点击分页(此时有4页数据),grid能够正常分页显示。此时选择combobox,重新查询load store,grid和pageToolbar进行更新(此时有2页数据),点击下一页grid数据[b]没有更新显示下一页数据[/b]。附核心代码:
根据combobox加载jsonstore,更新grid
[code="javascript"]
function reload(status){
var url = String.format(queryUri + 'status.json?status={0}',status);
var comboStore = createJsonStore(fields,url);
comboStore.load(
{
params:{start:0, limit:pageSize},
callback:function(r,options,success){
if(success == true){
var isNull = comboStore.getAt(0) == null;
if(isNull){
grid.store.removeAll();
grid.getView().refresh();
}else{
grid.store = comboStore;
var pageTool = grid.getBottomToolbar();
pageTool.updateInfo();
pageTool.bindStore(grid.store);
var topTool = grid.getTopToolbar();
topTool.bindStore(grid.store);
grid.getView().refresh();
}
}else{
Ext.MessageBox.alert("查询失败");
}
}
}
);
}
[/code]

[code="javascript"]
function createJsonStore(fileds,url) {
var jsonStore = new Ext.data.JsonStore({
fields : fileds,
root : 'root',
totalProperty : 'totalCount',
remoteSort : true,
proxy : new Ext.data.ScriptTagProxy({
url : url
})
});
return jsonStore;
}

[/code]

2个回答

[code="js"]
createPaging:function(pageSize,store){
this.option={
items:['-'],
store:store,
displayInfo:true,
pageSize:pageSize,
displayMsg:'{0}-{1}/{2}',
emptyMsg:KQinfo.msg.notRecords
};
if(this.dynamicPageSize){
var pageStore=new Ext.data.ArrayStore({
fields:['value','text'],
data:this.dynamicPageRecords
});
this.pageCombo=new Ext.form.ComboBox({
width:60,
mode:'local',
editable:false,
typeAhead:true,
value:pageSize,
store:pageStore,
valueField:'value',
displayField:'text',
selectOnFocus:true,
triggerAction:'all',
forceSelection:true
});
this.option.items.push({xtype:'displayfield',value:KQinfo.btn.dynamicPage},this.pageCombo);
}
var pagingBar=new Ext.PagingToolbar(this.option);
if(this.dynamicPageSize){
this.pageCombo.on('select',function(combo){
this.pageSize=combo.getValue();
pagingBar.pageSize=this.pageSize;
this.store.reload({params:{start:0,limit:this.pageSize}});
},this);
}
this.bbar=pagingBar;
delete this.option;
},
createStore:function(){
if(Ext.isEmpty(this.storeMapping))throw 'storeMapping undefined...';
var gridStore=new Ext.data.JsonStore({
root:"gridRows",
remoteSort:true,
url:this.actionUrl,
fields:this.storeMapping,
totalProperty:"totalCount"
});
gridStore.on('loadexception',function(s,r,response){
var status=response.status;
if(status=='401'||status=='500'||status=='404'){
parent.location.href=path+KQinfo.loginUrl;
}
},this);
gridStore.baseParams=this.params||{};
if(this.hasPage){
gridStore.load({params:{start:0,limit:this.pageSize}});
this.createPaging(this.pageSize,gridStore);
}else{
gridStore.load();
}
this.store=gridStore;
},
[/code]

lz的问题是ext自带的分页组件点击下一页数据没有刷新,需要手动刷新才能更新数据,并不是自定义分页组件的实现有问题,我想是combostore回调的时候有问题,但是直接看代码看不出来到底哪里有问题。 :oops:

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
【extjs】Ext.data.HttpProxy的问题,关于grid加载acion返回数据(struts2)
如题,初学extjs [code="java"] var store =new Ext.data.JsonStore({ autoLoad:true, proxy:new Ext.data.HttpProxy({url:"http://localhost:8080/rbs/Login_testLogin.action"}), // data:[{"id":1,"name":"图片","typeValue":"pic"},{"id":2,"name":"视频","typeValue":"avi"}], fields:["id","name","typeValue"], }) [/code] 上面的代码中,url里的action返回的string结果就是下面注释行中data的内容 但是当我使用注释行里写死的数据的时候,grid才能加载到数据,而用proxy获取action返回数据的时候,却不行 然后是action的代码 [code="java"] List<Types> lt = service.findListByParam("from Types types"); JSONArray jsonObject = JSONArray.fromObject(lt); outputStr = jsonObject.toString(); System.out.println(outputStr); PrintWriter out = ServletActionContext.getResponse().getWriter(); getResponse().setContentType("text/javascript;charset=GBK"); out.print(outputStr); return null; [/code]
extjs 编码问题.继续请教问题之2
数据库结构比如说是就一个id (int) ,name (nvchar) 我也就做一个form的表格插入.一个读取. new Ext.form.FormPanel 的插入没有问题. 是一个xtype: "textfield",类型的name. 插入的时候有特殊字符.单引,双引,正斜杠,反斜杠,回车<fsa>等等 而且已经写到数据库里了。也没有问题 但读去的时候我是用new Ext.data.JsonStore读取的 着时候读取就会报json格式不对.因为里面不能有特殊字符 我用一个第三方的插件处理了一下System.Net.Json着下表单的显示和保存都没有问题了. 但在列表页grid的时候,<fsa>的数据不显示. 比如一个title. 数据是abcd<fsa> 只有<fsa>不显示.请问有办法么
extjs的grid在页面上无法显示
js代码如下,效果就是页眉,页脚,和右边的表单可以显示出来,中间网格空白,F12可以看到请求成功,并且返回了数据,求帮助! Ext.onReady(function(){ //页面整体布局 var viewport = new Ext.Viewport({ layout:'border', items:[{ region:'north', html:'<div style="font-weight:bold;font-size:200%;">学生信息管理</div>' },grid,{ //这里放网格 region:'east', html:'表单' },{ region:'south', html:'<div style="text-align:right;">页脚</div>' }] }); var sexRenderer = function(value){ if(value){ return '<span>男</span>'; } else{ return '<span>女</span>'; } }; var store = new Ext.data.JsonStore({ proxy : new Ext.data.HttpProxy({ url : 'test'// 相对路径 }), reader : new Ext.data.JsonReader({ totalProperty : 'totalCount',//总条目数 root : 'students' //数据 }), fields : [{ name : 'name' }, { name : 'gender' }, { name : 'tel' }, { name : 'political' }, { name : 'professional' }], pageSize:2 }); store.load({params:{start:0,limit:2}}); //构造列 var columns = new Ext.grid.ColumnModel([ {header:'姓名',dataIndex:'name'}, {header:'性别',dataIndex:'gender',renderer:sexRenderer}, //为真返回男,否则女 {header:'电话',dataIndex:'tel'}, {header:'政治面貌',dataIndex:'political'}, {header:'专业',dataIndex:'professional'} ]); columns.defaultSortable = true; //构造网格 var grid = new Ext.grid.GridPanel({ viewConfig : { forceFit : true }, region:'center', store :store, cm : columns, bbar:new Ext.PagingToolbar({ pageSize:2, store:store, displayInfo:true, displayMsg:'show{0}th to {1}th record, sum{2}', emptyMsg:'No Record!' }) }); });
当grid设置了可拖拽后, 多选的效果就被屏蔽了...咋整?
官网有一个例子, 实现了两个表格之间的拖拽. 地址是这个: [url]http://www.extjs.com/deploy/dev/examples/dd/dnd_grid_to_grid.html[/url] 这个例子中, 选择多行需要按下Shift或者是Ctrl. 但是客户不会这么聪明, 他们也许认为加上一个多选框会直观. 于是, 我给这个例子的代码做了小小的改动, 使之具有多选框. 但是调试之后, 发现, [color=red]只要设置了enableDragDrop为真, 多选框就只能当单选框用[/color]! 把enableDragDrop注释掉后就能多选了. 杯具挖...鱼和熊掌不能兼得? 下面是我的代码, 可直接运行.. [code="js"] Ext.onReady(function(){ var myData = { records : [ { name : "Rec 0", column1 : "0", column2 : "0" }, { name : "Rec 1", column1 : "1", column2 : "1" }, { name : "Rec 2", column1 : "2", column2 : "2" }, { name : "Rec 3", column1 : "3", column2 : "3" }, { name : "Rec 4", column1 : "4", column2 : "4" }, { name : "Rec 5", column1 : "5", column2 : "5" }, { name : "Rec 6", column1 : "6", column2 : "6" }, { name : "Rec 7", column1 : "7", column2 : "7" }, { name : "Rec 8", column1 : "8", column2 : "8" }, { name : "Rec 9", column1 : "9", column2 : "9" } ] }; var firstGridStore = new Ext.data.JsonStore({ fields : [ {name: 'name', mapping : 'name'}, {name: 'column1', mapping : 'column1'}, {name: 'column2', mapping : 'column2'} ], data : myData, root : 'records' }); // 多选 var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false}); /** * 表格1 */ var firstGrid = new Ext.grid.GridPanel({ // 可多选 sm : sm, ddGroup : 'secondGridDDGroup', store : firstGridStore, columns : [ sm, { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'}, {header: "column1", width: 50, sortable: true, dataIndex: 'column1'}, {header: "column2", width: 50, sortable: true, dataIndex: 'column2'} ], enableDragDrop : true, // 可拖拽. 注释掉就能多选; 否则只能单选... primaryButtonOnly: true, stripeRows : true, autoExpandColumn : 'name', title : 'First Grid' }); var secondGridStore = new Ext.data.JsonStore({ fields : [ {name: 'name', mapping : 'name'}, {name: 'column1', mapping : 'column1'}, {name: 'column2', mapping : 'column2'} ], root : 'records' }); var secondGrid = new Ext.grid.GridPanel({ ddGroup : 'firstGridDDGroup', store : secondGridStore, columns : [ { id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'}, {header: "column1", width: 50, sortable: true, dataIndex: 'column1'}, {header: "column2", width: 50, sortable: true, dataIndex: 'column2'} ], enableDragDrop : true, stripeRows : true, autoExpandColumn : 'name', title : 'Second Grid' }); var displayPanel = new Ext.Panel({ width : 650, height : 300, layout : 'hbox', renderTo : document.body, defaults : { flex : 1 }, //auto stretch layoutConfig : { align : 'stretch' }, items : [ firstGrid, secondGrid ], bbar : [ '->', // Fill { text : 'Reset both grids', handler : function() { //refresh source grid firstGridStore.loadData(myData); //purge destination grid secondGridStore.removeAll(); } } ] }); var firstGridDropTargetEl = firstGrid.getView().scroller.dom; new Ext.dd.DropTarget(firstGridDropTargetEl, { ddGroup : 'firstGridDDGroup', notifyDrop : function(ddSource, e, data){ var records = ddSource.dragData.selections; Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); firstGrid.store.add(records); firstGrid.store.sort('name', 'ASC'); return true } }); var secondGridDropTargetEl = secondGrid.getView().scroller.dom; new Ext.dd.DropTarget(secondGridDropTargetEl, { ddGroup : 'secondGridDDGroup', notifyDrop : function(ddSource, e, data){ var records = ddSource.dragData.selections; Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store); secondGrid.store.add(records); secondGrid.store.sort('name', 'ASC'); return true } }); }); [/code] 有人能解决这难题么... [b]问题补充:[/b] 实在是杯具. 请问拖拽多选都是用ctrl shift实现的么 多选了就会覆盖checkbox的多选? 个人觉得这样设计并不好... 目前的最佳做法只能是放弃拖拽了. 客户确实是傻子..但是却不是傻B. 他们经常拍脑袋想出一些自以为很高明的观点:"这个表格数据要是能拖拽, 就显得很摩登了嘛~" [b]问题补充:[/b] .....
extJS grid取数据遇到的问题
根据官方的例子改了一个从jsp读取数据的grid,firebug里response有响应的数据,但grid里显示不出来。 以下是我的文件,一个html,一个js,一个jsp,请帮忙看一下问题出在哪里。 [code="java"] <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Array Grid Example</title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all-debug.js"></script> <script type="text/javascript" src="json-grid.js"></script> <link rel="stylesheet" type="text/css" href="examples.css" /> </head> <body> <h1> Array Grid Example </h1> <p> This example shows how to create a grid from Array data. </p> <div id="grid-example"></div> </body> </html> [/code] [code="java"] Ext.onReady(function(){ Ext.BLANK_IMAGE_URL='extjs/resources/images/default/s.gif'; var store = new Ext.data.JsonStore({ proxy: new Ext.data.HttpProxy({ //url:'http://localhost/extjs/jsonAction.jsp' url: 'jsonAction.jsp' }), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root' }), fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); store.load(); var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: "Change", width: 75, sortable: true, dataIndex: 'change'}, {header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}, {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], stripeRows: true, autoExpandColumn: 'company', height:350, width:600, title:'Array Grid' }); grid.render('grid-example'); }); [/code] [code="java"] <% String json = "({totalProperty:2,root:["; json += "{company:'3m Co',price:71.72,change:0.02,pctChange:0.03,lastChange:'9/1 12:00am'},"; json += "{company:'Alcoa Inc',price:29.01,change:0.42,pctChange:1.47,lastChange:'9/1 12:00am'}"; json += "]});"; System.out.println(json); response.getWriter().write(json); %> [/code] [b]问题补充:[/b] 回一楼的,我去掉分号或去掉分号和两边的“()”,结果还是一样,显示不出来数据 [b]问题补充:[/b] 谢谢两位,问题解决了。总结一下,希望后面遇到同样问题的朋友少走弯路。 第一个是分号的问题,以我测试情况看来,括号其实可以有。 第二个是Store的问题,yourgame提到的,换成Store就可以了。 然后我去查了一下API,发现JsonStore不需要配置reader这个属性。所以我换了另一种写法,也是可以的。 [code="java"] var store = new Ext.data.JsonStore({ url: 'jsonAction.jsp', // 把reader里的东西拿出来 totalProperty : 'totalProperty', root : 'root', fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); [/code] 另,其实不用去配proxy,直接写url属性就可以。 [quote] url : String If passed, an HttpProxy is created for the passed URL [/quote]
extjs 的gridPanel通过JsonStore取不到值
这是显示部分 var store=new Ext.data.JsonStore({ proxy: new Ext.data.HttpProxy({ url: 'getUserData.jsp' }), //url:'http://design/getUserData.jsp', reader: new Ext.data.JsonReader( {fields:['username','usergroup']} ) /* fields:[ {name:'username'}, {name:'usergroup'}] */ }); store.load(); var gridPanel=new Ext.grid.GridPanel({ store:store, columns:[ /*{ header:'用户ID', dataIndex:'id', width:100 },*/ { header:'用户名', dataIndex:'username', width:160 },{ header:'用户组', dataIndex:'usergroup', width:160 }], viewConfig:{ sortAscText:'正序排列', sortDescText:'逆序排列', forceFit:true }, width:600, height:400, frame:true, //title:'Framed with Checkbox Selection and Horizontal Scrolling', iconCls:'icon-grid' }); 下面是数据,读取的页面的内容没有html,head和body标签,只有 [ {"username":"aaa","usergroup":"bbb"}, {"username":"bbb","usergroup":"111"} ] 我试过直接在store用data属性直接给值,显示正常,但是一旦到网页去取,就取不到值 现在死活拿不到值,试过很多方法了
ExtJs表格数据不显示,但是数据已经相应到前台
``` var vstore = new Ext.data.JsonStore({ url : 'EmployeeServlet?action=getAll', root : "result", fields : ["id", "name", "password", "email", "bornDate", "intro"] }); vstore.load(); var grid = new Ext.grid.EditorGridPanel({ title : "雇员列表", store : vstore, height : 400, width : 800, columns : [{ header : "ID", dataIndex : "id", sortable : true }, { header : "姓名", dataIndex : "name", editor : new Ext.form.TextField() }, { header : "密码", width : 100, dataIndex : "password" }, { header : "电子邮件", dataIndex : "email", handler : function(v) { return v.link(v); } }, { header : "出生日期", width : 120, dataIndex : "bornDate", sortable : true, editor : new Ext.form.DateField(), renderer : function(v) { return v.format("Y-m-d"); } }, { header : "简介", dataIndex : "intro" }] }); grid.render(Ext.getBody()); ```
Help!!! Struts2+ExtJs action返回结果输出到其他页面的问题
想要实现的是获取action返回后跳转到另外的页面(struts.xml控制),并把数据用GridPane输出.也就是用gridpanel替换掉"<s:iterator>"标签的作用. 例如 getUser.jsp->submit->searchuser.action->(json string)userlist->userlist.jsp(gridpanel显示). 请问,ExtJs是AJAX 实现的话,[color=red]action是否一定是将数据返回到提交页面的?[/color]例如 getUser.jsp->searchuser.action->getUser.jsp. 如果是,那应该怎样将数据转移给我想要跳转的页面(userlist.jsp)? 下面是我做的一个例子,跳转到userlist.jsp后GridPanel[color=red]只看到Grid而没有数据[/color],初学ExtJs,请各位多多指教!! getUser.jsp(action="searchuser")用于提交用户ID,略过. struts.xml [code="xml"] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="prodinfo" extends="struts-default"> <action name="searchuser" class="userAction" method="searchUser"> <result name="success">/userlist.jsp</result> </action> </package> </struts> [/code] 响应searchuser.action的class:userAction [code="java"] package com.prodinfo.action; import java.util.Map; import java.util.List; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; import java.util.Collection; import com.prodinfo.biz.*; import com.prodinfo.common.*; import com.prodinfo.dao.*; import com.prodinfo.pojo.Logger; import com.prodinfo.pojo.SysUsr; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; public class UserAction extends ActionSupport { private String userid; private String password; private String username; private String usrpwdques; private String usrpwdans; private String usremail; private ILoggerDao loggerdao; private IUserOperation uo; private ComDate comdate; private ComSession ssn; private SysUsr sysusr; public String userlist; public UserAction() { comdate = new ComDate(); ssn = new ComSession(); } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getUsrpwdques() { return usrpwdques; } public void setUsrpwdques(String usrpwdques) { this.usrpwdques = usrpwdques; } public String getUsrpwdans() { return usrpwdans; } public void setUsrpwdans(String usrpwdans) { this.usrpwdans = usrpwdans; } public String getUsremail() { return usremail; } public void setUsremail(String usremail) { this.usremail = usremail; } public void setLoggerdao(ILoggerDao loggerdao) { this.loggerdao = loggerdao; } public void setUo(IUserOperation uo) { this.uo = uo; } public String getUserlist() { return userlist; } public void setUserlist(String userlist) { this.userlist = userlist; } public String searchUser() { try { ComUserInfo comuserinfo = new ComUserInfo(); if (comuserinfo.getUserid() != "") { List result = uo.searchUser(getUserid()); JsonUtil ju = new JsonUtil(); String jsresult = ju.collection2json(result); this.userlist = ("{" + "\"userlist\": " + jsresult + " }"); System.out.println(userlist); //response.getWriter().println(userlist); return SUCCESS; } else { ssn.add("errmsg", "User not login yet!"); return ERROR; } } catch (Exception e) { ssn.add("errmsg", e.getMessage()); return ERROR; } } } [/code] userAction返回的"userlist"数据如下: { "userlist": [ {"usrCreateBy":"","usrCreateDate":"","usrDisableDate":"", "usrEmail":"Frankie@together.com","usrId":"80319474","usrName":"Frankie", "usrPwd":"1233","usrPwdAns":"1+1","usrPwdQues":"2", "usrRemark":"","usrUpdateBy":"","usrUpdateDate":""}, {"usrCreateBy":"","usrCreateDate":"","usrDisableDate":"", "usrEmail":"Justin@together.com","usrId":"80334272","usrName":"Justin", "usrPwd":"1234","usrPwdAns":"2","usrPwdQues":"1+1", "usrRemark":"nothing","usrUpdateBy":"","usrUpdateDate":""}, {"usrCreateBy":"","usrCreateDate":"","usrDisableDate":"", "usrEmail":"Justin@together.com","usrId":"sa","usrName":"sysadmin", "usrPwd":"a","usrPwdAns":"2","usrPwdQues":"1+1", "usrRemark":"nothing","usrUpdateBy":"","usrUpdateDate":""} ] } 输出页面的js: userlist.js: [code="java"] /* * Ext JS Library 3.0 RC2 Copyright(c) 2006-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function() { Ext.QuickTips.init(); // turn on validation errors beside the field globally // Ext.form.Field.prototype.msgTarget = 'side'; var cm = new Ext.grid.ColumnModel([{ header : '用户ID', dataIndex : 'userId' }, { header : '用户昵称', dataIndex : 'usrName' }, { header : '密码', dataIndex : 'usrPwd' }, { header : '电子邮件地址', dataIndex : 'usrEmail' }, { header : '密码提示问题', dataIndex : 'usrPwdQues' }, { header : '密码提示问题答案', dataIndex : 'usrPwdAns' }]); var reader = new Ext.data.Store({ root : 'userlist' }, [{ name : 'usrId', mapping : 'userId' }, { name : 'usrName', mapping : 'usrName' }, { name : 'usrPwd', mapping : 'usrPwd' }, { name : 'usrEmail', mapping : 'usrEmail' }, { name : 'usrPwdQues', mapping : 'usrPwdQues' }, { name : 'usrPwdAns', mapping : 'usrPwdAns' }]); var pxy = new Ext.data.HttpProxy({ url : 'searchuser.action', method : 'GET' }) var ds = new Ext.data.JsonStore({ proxy : pxy, reader : reader }); var grid = new Ext.grid.GridPanel({ store : ds, sm : sm, cm : cm, loadMask : { msg : ' 数据加载中...' }, autoHeight : true }); var sm = new Ext.grid.CheckboxSelectionModel(); var vp = new Ext.Viewport({ layout : "border", frame : true, title : "注册", autoHeight : true, items : [{// Viewport region : "north", height : 100, title : "顶部面板" }, { region : "south", height : 50, title : "底部面板" }, { region : "west", width : "20%", title : "左边面板" }, { region : "east", width : "20%", title : "右边面板" }, { region : "center", title : "中央面板", items : [frm = new Ext.FormPanel({ items : [grid] } /* Eof formpanel */) /* Eof border center */] } /* Eof Viewport */] }); grid.render(); ds.load(); vp.render(document.body); }); [/code] [b]问题补充:[/b] 感谢 yourgame (资深架构师) 的回答 你完全理解错误了.. 如果用到了extjs 就不需要什么跳转了.你直接输出out.print(json); =========================================================== 您的意思是否我在问题里提到的"ExtJs是AJAX 实现的话,action是否一定是将数据返回到提交页面的?例如 getUser.jsp->searchuser.action->getUser.jsp."? 可是如果我想把数据放到其他页面的话,我应该怎么做才能把数据送过去呢.请不吝赐教. [b]问题补充:[/b] 感谢两位的回答,我现在转换了思路,当用户提交了之后,先进行页面跳转到userlist.jsp,然后才在userlist,jsp里去请求action的返回数据,并放到GridPanel里,不知道这种思路是否可行. 即: getUser.jsp->Submit->redirect->userlist.jsp->searchuser.action->userlist.jsp(Grid展现)
extjs4页面和数据库交互
var store; var grid; var pageSize = 2; var str = ""; function search(){ str = document.getElementById("sstj").value; //alert(str); store.reload({params:{ start: 0, limit: pageSize, str:str }}); } Ext.onReady(function() { Ext.QuickTips.init(); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var form = new Ext.form.FormPanel({ baseCls: 'x-plain', layout:'absolute', url:'save-form.php', defaultType: 'textfield', items: [{ x: 60, y: 0, id:'id', name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 5, xtype:'label', text: '用户编号:' },{ x: 60, y: 0, id:'userid', name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 35, xtype:'label', text: '用户名:' },{ x: 60, y: 30, id:'username', name: 'username', anchor: '100%' // anchor width by percentage },{ x: 0, y: 65, xtype:'label', text: '性别:' },{ x: 60, y: 60, id:'usergender', name: 'usergender', anchor: '100%' // anchor width by percentage },{ x: 0, y: 95, xtype:'label', text: '部门:' },{ x: 60, y: 90, id:'useraction', name: 'useraction', anchor: '100%' // anchor width by percentage },{ x: 0, y: 125, xtype:'label', text: '籍贯:' },{ x: 60, y: 120, id:'userbirthplace', name: 'userbirthplace', anchor: '100%' // anchor width by percentage },{ x: 0, y: 155, xtype:'label', text: '出生日:' },{ x: 60, y: 150, id:'userbirth', name: 'userbirth', anchor: '100%' // anchor width by percentage }] }); var window = new Ext.Window({ title: '信息编辑', width: 500, modal:true, closeAction:'hide', height:300, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, bodyStyle:'padding:5px;', buttonAlign:'center', items: form, buttons: [{ text: '保存', handler:function(){ var id = Ext.getCmp("id").getValue(""); var userid = Ext.getCmp("userid").getValue(""); var username = Ext.getCmp("username").getValue(""); var usergender = Ext.getCmp("usergender").getValue(""); var useraction = Ext.getCmp("useraction").getValue(""); var userbirthplace = Ext.getCmp("userbirthplace").getValue(""); var userbirth = Ext.getCmp("userbirth").getValue(""); var url = 'http://localhost:8080/extjs/AddStudent?id='+id+'&userid='+userid+'&username='+username+'&usergender='+usergender+'&useraction='+useraction+'&userbirthplace='+userbirthplace+'&userbirth='+userbirth; $.ajax({ type:'post', url:'http://localhost:8086/extjs/CheckStudent?id='+id+'&userid='+userid, success:function(str1){ if(str1!=""){ alert("用户编号不能重复!"); }else{ $.ajax({ type:'post', url:encodeURI(encodeURI(url)), success:function(){ window.hide(); store.load({ params: { start: 0, limit: pageSize} }); } }); } } }); } },{ text: '取消', handler:function(){ window.hide(); } }] }); var buttons = []; for (var i = 0; i < 3; i++) { if(i==0){ buttons.push({ text: '新增', width:40, handler: function(b) { /*Ext.getCmp("id").setValue(""); Ext.getCmp("userid").setValue(""); Ext.getCmp("username").setValue(""); Ext.getCmp("useraddress").setValue(""); Ext.getCmp("userphone").setValue(""); Ext.getCmp("useremail").setValue(""); Ext.getCmp("userrole").setValue(""); Ext.getCmp('id').setVisible(false);*/ form.getForm().reset(); window.show(); } }) } if(i==1){ buttons.push({ text: '修改', width:40, handler: function(b) { //alert('You clicked ' + b.text); var s = grid.getSelectionModel().getSelections(); if(s!=""){ // alert(s[0].data.id); var id = s[0].data.id; var userid = s[0].data.userid; var username = s[0].data.username; var usergender = s[0].data.usergender; var useraction = s[0].data.useraction; var userbirthplace = s[0].data.userbirthplace; var userbirth = s[0].data.userbirth; Ext.getCmp("id").setValue(id); Ext.getCmp("userid").setValue(userid); Ext.getCmp("username").setValue(username); Ext.getCmp("usergender").setValue(usergender); Ext.getCmp("useraction").setValue(useraction); Ext.getCmp("userbirthplace").setValue(userbirthplace); Ext.getCmp("userbirth").setValue(userbirth); Ext.getCmp('id').setVisible(false); window.show(); }else{ alert("请选择行后再修改!"); } } }) } if(i==2){ buttons.push({ text: '删除', width:40, handler: function(b) { var s = grid.getSelectionModel().getSelections(); if(s==""){ alert("请选择行后再删除!"); }else if(confirm('确认要删除此记录吗?')){ var r = s[0].data.id; $.post('http://localhost:8080/extjs/DeleUserServlet?id='+r,function(){ store.load({ params: { start: 0, limit: pageSize} }); }); // alert("删除成功!"); } } }) } } store = new Ext.data.JsonStore({ url: 'http://localhost:8080/extjs/UserServlet', // url:'index.json', totalProperty:'totalCount', root: 'bugs', baseParams:{ str:"" }, fields: ['id', 'userid', 'username','usergender','useraction','userbirthplace','userbirth'] }); store.on('beforeload',function(){ // alert(str); Ext.apply(this.baseParams,{ str:str }); }); store.on("load",function(){ for(var i=0; i<store.getCount(); i++){ //alert(store.getAt(i).get("userid")); } }); grid = new Ext.grid.GridPanel({ store: store, tbar:buttons, bbar : new Ext.PagingToolbar({ pageSize : pageSize, store : store, displayInfo : true, displayMsg : '第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg : "没有记录" }), columns: [ { header : '用户ID', width : 175, sortable : true, dataIndex: 'id', hidden:true },{ header : '用户编号', width : 75, sortable : true, dataIndex: 'userid' }, { header : '用户名', width : 75, sortable : true, dataIndex: 'username' }, { header : '性别', width : 100, sortable : true, dataIndex: 'usergender' }, { header : '部门', width : 75, sortable : true, dataIndex: 'useraction' }, { header : '籍贯', width : 85, sortable : true, dataIndex: 'userbirthplace' }, { header : '出生日', width : 85, sortable : true, dataIndex: 'userbirth' } ], stripeRows: true, height: 500, width: 1000, stateful: true, stateId: 'grid' }); store.load({ params: { start: 0, limit: pageSize} }); grid.render('grid-example'); });
extjs如何把折线图chart放入到panel中进行显示
<script type="text/javascript"> Ext.onReady(function() { //创建每月贴现价格统计图 //通过JSON从数据库中获取数据 var chartStore = Ext.create('Ext.data.JsonStore', { fields : [ 'date', 'price1', 'price2', 'price3', 'price4' ], proxy : { type : 'ajax', url : 'chartSearch', reader : { type : 'json' } } }); //四条按交易类别区分的统计线 var monthPriceChart=Ext.create('Ext.chart.Chart', { id:'monthPriceChartid', animate: true, /* renderTo:'LineChart', */ width: 500, height: 300, store : chartStore, axes : [ {//定义坐标轴 title : 'Price', //纵轴标题 type : 'Numeric', position : 'left', fields : [ 'price1','price2','price3','price4'], grid:true, minimum:0 }, { title : 'Day', type : 'Category', position : 'bottom', fields : [ 'date' ] } ], series : [ { type : 'line', highlight:{ size:7, radius:7 }, displayName : '小票买断价', xField : 'date', yField : 'price1', markerConfig:{ type:'cross', size:4, radius:4, 'stroke-width':0 }, style : { color : 0xCCFF00 } }, { type : 'line', highlight:{ size:7, radius:7 }, displayName : '大票买断价', xField : 'date', yField : 'price2', markerConfig:{ type:'circle', size:4, radius:4, 'stroke-width':0 }, style : { color : 0xCC0000 } }, { type : 'line', highlight:{ size:7, radius:7 }, displayName : '当天出款价', xField : 'date', yField : 'price3', markerConfig:{ type:'cross', size:4, radius:4, 'stroke-width':0 }, style : { color : 0x0033FF } }, { type : 'line', highlight:{ size:7, radius:7 }, displayName : '带票价', xField : 'date', yField : 'price4', markerConfig:{ type:'circle', size:4, radius:4, 'stroke-width':0 }, style : { color : 0x66CC00 } } ] }); //创建一个panel var chartPanel = Ext.create('Ext.panel.Panel', { id:'chartPanel', renderTo : Ext.getBody(), title : '价格统计图', layout:'border', border : false, autoScroll:true, tbar : [ '时间', { xtype : 'combo', format : 'Y-M',//显示类型 name : 'month', id : 'month', store : [ '2013-07', '2013-08', '2013-09', '2013-10', '2013-11', '2013-12', '2014-01' ], emptyText : '2013-12', editable : false }, '银行类别:', { xtype : 'combo', name : 'bankType', id : 'bankSearch', store : [ '国股', '北上南宁', '省会城商', '全国城商', '外资', '农商农合', '信用社村镇' ], emptyText : '国股', editable : false }, '-', { text : '查询', handler : function() { chartStore.load({ params : { 'month' : Ext.getCmp('month').getValue(), 'bankType' : Ext.getCmp('bankSearch') .getValue() } }); } } ] }); chartStore.load({ params : { 'month' : '2013-12', 'bankType' : '国股' } }); }) </script> 以上是我的页面代码,如何使得折线图chart能够放入到panel中进行显示,我用的是extjs4-2-1版本,求详细解答,谢谢
EXTJS页面设计,请教各位大神
我现在要做一个页面,如图![图片说明](https://img-ask.csdn.net/upload/201509/22/1442909977_428479.png) 可是中间的那一排按钮.我添加不上去了. 第一次使用EXT.. 麻烦各位大神帮忙看看. ``` // 流程配置管理信息添加 Ext.define('App.WorkFlowConfigurationWindow', { extend : 'Ext.window.Window', constructor : function(config) { config = config || {}; Ext.apply(config, { title : '流程配置管理信息', width : 350, height : 250, bodyPadding : '10 5', layout : 'fit', modal : true, items : [ { xtype : 'form', fieldDefaults : { labelAlign : 'left', labelWidth : 90, anchor : '100%' }, items : [ { xtype : 'textfield', name : 'orderNumber', fieldLabel : '序号' }, { xtype : 'textfield', name : 'workFlowName', fieldLabel : '流程名称' }, { xtype : 'textfield', name : 'sourceApplicationSystem', fieldLabel : '源应用系统' }, { xtype : 'textfield', name : 'sourceDataSource', fieldLabel : '源数据源' }, { xtype : 'textfield', fieldLabel : '目标系统', name : 'targetSystem' } ,{ xtype : 'textfield', fieldLabel : '目标数据源', name : 'targetDateSource' },{ xtype : 'textfield', fieldLabel : '状态', name : 'status' }], buttons : [ '->', { text : '确定', iconCls : 'icon-accept', width : 80, handler : function() { this.up('window').close(); } }, '->' ] } ] }); App.WorkFlowConfigurationWindow.superclass.constructor.call(this, config); } }); Ext.define('Forestry.app.forestryMonitor.ForestryAlarm', { extend : 'Ext.grid.Panel', plain : true, border : true, region : 'center', split : true, initComponent : function() { var me = this; var forestryTypeNameStore = Ext.create('Ext.data.JsonStore', { proxy : { type : 'ajax', url : appBaseUri + '', reader : { type : 'json', root : 'list', idProperty : 'ItemValue' } }, fields : [ 'ItemText', 'ItemValue' ] }); Ext.define('ModelList', { extend : 'Ext.data.Model', idProperty : 'id', fields : ['orderNumber', 'workFlowName','sourceApplicationSystem','sourceDataSource','targetSystem','targetDateSource','status' ] }); var workFlowQueryStore = Ext.create('Ext.data.Store', { model : 'ModelList', // autoDestroy: true, autoLoad : true, remoteSort : true, pageSize : globalPageSize, proxy : { type : 'ajax', url : appBaseUri + '/changeservice/workFlowConfiguration/searchWorkFlowConfiguration', extraParams : me.extraParams || null, reader : { type : 'json', root : 'data', totalProperty : 'totalRecord', successProperty : "success" } }, sorters : [ { property : 'orderNumber', direction : 'DESC' } ] }); var columns = [ { text : "序号", dataIndex : 'orderNumber', width : '5%' }, { text : "流程名称1", dataIndex : 'workFlowName', width : '10%' }, { text : "源应用系统", dataIndex : 'sourceApplicationSystem', width : '17%' }, { text : "源数据源", dataIndex : 'sourceDataSource', width : '17%' }, { text : "目标系统", dataIndex : 'targetSystem', width : '10%', }, { text : "目标数据源", dataIndex : 'targetDateSource', width : '17%', }, { text : "状态", dataIndex : 'status', width : '5%', } ]; var ttoolbar = Ext.create('Ext.toolbar.Toolbar', { items : [ { xtype : 'textfield', id : 'workFlowConfiguration-workFlowName', name : 'workFlowName', fieldLabel : '流程名称', labelWidth : 30, width : '15%' }, { xtype : 'textfield', id : 'workFlowConfiguration-sourceApplicationSystem', name : 'sourceApplicationSystem', fieldLabel : '源应用系统', labelWidth : 30, width : '15%' }, { xtype : 'textfield', id : 'workFlowConfiguration-sourceDataSource', name : 'sourceDataSource', fieldLabel : '源数据源', labelWidth : 30, width : '15%' }, { xtype : 'textfield', id : 'workFlowConfiguration-targetSystem', name : 'targetSystem', fieldLabel : '目标系统', labelWidth : 30, width : '15%' }, { xtype : 'textfield', id : 'workFlowConfiguration-targetDateSource', name : 'targetDateSource', fieldLabel : '目标数据源', labelWidth : 30, width : '15%' }, { xtype : 'combobox', fieldLabel : '状态', id : 'workFlowConfiguration-status', name : 'status', store : status, valueField : 'ItemValue', displayField : 'ItemText', typeAhead : true, queryMode : 'remote', emptyText : '请选择...', editable : false, labelWidth : 30, width : '15%', maxWidth : 320 }, { xtype : 'button', text : '查询', iconCls : 'icon-search', width : '10%', maxWidth : 60, handler : function(btn, eventObj) { var searchParams = { workFlowName : Ext.getCmp('workFlowConfiguration-workFlowName').getValue(), sourceApplicationSystem : Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').getValue(), sourceDataSource : Ext.getCmp('workFlowConfiguration-sourceDataSource').getValue(), targetSystem : Ext.getCmp('workFlowConfiguration-targetSystem').getValue(), targetDateSource : Ext.getCmp('workFlowConfiguration-targetDateSource').getValue(), status : Ext.getCmp('workFlowConfiguration-status').getValue() }; Ext.apply(workFlowQueryStore.proxy.extraParams, searchParams); workFlowQueryStore.reload(); } }, { xtype : 'button', text : '重置', iconCls : 'icon-reset', width : '10%', maxWidth : 60, handler : function(btn, eventObj) { Ext.getCmp('workFlowConfiguration-workFlowName').setValue(null); Ext.getCmp('workFlowConfiguration-sourceApplicationSystem').setValue(null); Ext.getCmp('workFlowConfiguration-sourceDataSource').setValue(null); Ext.getCmp('workFlowConfiguration-targetSystem').setValue(null); Ext.getCmp('workFlowConfiguration-targetDateSource').setValue(null); Ext.getCmp('workFlowConfiguration-status').setValue(null); } }] }); Ext.apply(this, { store : workFlowQueryStore, columns : columns, selModel : Ext.create('Ext.selection.CheckboxModel'), tbar : ttoolbar, bbar : Ext.create('Ext.PagingToolbar', { store : workFlowQueryStore, displayInfo : true }), listeners : { itemdblclick : function(dataview, record, item, index, e) { var grid = this; var id = grid.getSelectionModel().getSelection()[0].get('id'); var gridRecord = grid.getStore().findRecord('id', id); var win = new App.WorkFlowConfigurationWindow({ hidden : true }); var form = win.down('form').getForm(); form.loadRecord(gridRecord); form.findField('workFlowName').setReadOnly(true); form.findField('sourceApplicationSystem').setReadOnly(true); form.findField('sourceDataSource').setReadOnly(true); form.findField('targetSystem').setReadOnly(true); form.findField('targetDateSource').setReadOnly(true); form.findField('status').setReadOnly(true); win.show(); } } }); forestryTypeNameStore.loadPage(1); this.callParent(arguments); } }); ``` 麻烦各位了大神, 很着急.....
ExtJS选中记录赋值的问题
/* * My test * */ MyDesktop.GridWindow1 = Ext.extend(Ext.app.Module, { id:'grid-win1', init : function(){ this.launcher = { text: '我的测试,嘿嘿', iconCls:'icon-grid', handler : this.createWindow, scope: this } }, createWindow : function(){ /* * 对生成的表格进行扩展 * */ var ds = new Ext.data.JsonStore({ remoteSort:true, url:'/newDesktop/fixinfo/getAll', fields:[ 'a','b','c','d','e', 'f','hhh','ggg' ], baseParams:{ limit:10 } }); ds.load({ params:{start:0} }); //end var thisGrid = new Ext.grid.GridPanel({ border:false, store:ds, columns:[ {header:'设备编号',dataIndex:'a',width:100,sortable:true}, {header:'设备名称',dataIndex:'b',width:100}, {header:'型号规格',dataIndex:'c',width:100}, {header:'区域',dataIndex:'d',width:80}, {header:'设备类型',dataIndex:'e',width:100}, {header:'生产国别',dataIndex:'f',width:100}, {header:'生产厂家',dataIndex:'hhh',width:100}, {header:'出厂编号',dataIndex:'ggg',width:100} ], viewConfig: { forceFit:true }, //autoExpandColumn:'company', bbar:new Ext.PagingToolbar({ store:ds, pageSize:10, displayinfo:'true', displayMsg:'显示第{0}条记录到第{1}条记录,一共{2}条', emptyMsg:'没有记录' }), tbar:[{ text:'增加设备', tooltip:'点击这里来增加设备', iconCls:'add', handler:this.createUser.createDelegate(this) }, '-', { text:'修改设备', tooltip:'选定一条记录后进行修改', iconCls:'option', handler:this.EditUser.createDelegate(this) },'-',{ text:'删除设备', tooltip:'选定一条设备之后进行删除', iconCls:'remove' }] }) var desktop = this.app.getDesktop(); var win = desktop.getWindow('grid-win1'); if(!win){ win = desktop.createWindow({ id: 'grid-win1', title:'我的测试', width:740, height:480, iconCls: 'icon-grid', shim:false, animCollapse:false, constrainHeader:true, layout: 'fit', items:thisGrid }); } win.show(); }, createUser:function(){ this.fixInfoWindow = new FixInfoWindow({ grid:this }); this.fixInfoWindow.show(); //this.FixInfoWindow.setTitle('新建用户资料'); //this.FixInfoWindow.url = 'user/save'; //此处的url对应着UserController的save()方法 //this.FixInfoWindow.fp.form.reset(); }, EditUser:function(){ var rec =thisGrid.getSelectionModel().getSelected(); alert(rec) if(rec){ this.fixInfoWindow = new FixInfoWindow({ grid:this }); this.fixInfoWindow.show(); this.fixInfoWindow.fp.form.loadRecord(rec); } else{Ext.Msg.alert("出错了","请选择一条记录操作"); } } });
最近遇到一个Ext.Ajax.request的奇怪问题
最近在学Extjs,照着视频做了一个提交数据并且添加store的demo,却遇到一个奇怪的问题:添加第一次的时候没有问题,添加第二次的时候就向服务器发了2次请求,添加第3次的时候就向服务器发了3次请求,导致了,第二次添加了2个相同的,第三次添加了3个相同的,请大家帮我看下是哪有写得有问题 [code="js"] Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "side"; PersonViewFormPanel = Ext.extend(Ext.form.FormPanel,{ constructor:function(){ PersonViewFormPanel.superclass.constructor.call(this,{ id:"form", layout:"form", defaultType:"textfield", baseCls:"x-plain", style:"padding:5px", defaults:{width:175}, width:240, height:85, labelWidth:45, items:[ {fieldLabel:"姓名",id:"name"}, {fieldLabel:"性别",id:"sex"}, {fieldLabel:"年龄",id:"age"} ] }); } }); PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel,{ constructor:function(){ PersonInfoFormPanel.superclass.constructor.call(this,{ layout:"form", id:"info_form", defaultType:"textfield", baseCls:"x-plain", bodyStyle:"padding:5px", defaults:{width:150}, width:240, height:85, labelWidth:45, items:[ {fieldLabel:"姓名",id:"name",allowBlank:false,blankText:"姓名必须填写!",emptyText:"必填"}, { xtype:"combo", fieldLabel:"性别", emptyText:"请选择", hiddenName:"sex", displayField:"name", valueField:"value", triggerAction:"all", mode:"local", readOnly:true, store:new Ext.data.JsonStore({ fields:["value","name"], data:[{value:0,name:"男"},{value:1,name:"女"}] }) }, {fieldLabel:"年龄",id:"age"} ] }); }, getValues:function(){ if(this.getForm().isValid()) return new Ext.data.Record(this.getForm().getValues()); else throw Error("表单验证未通过!"); }, setValues:function(_record){ this.getForm().loadRecord(_record); }, reset:function(){ this.getForm().reset(); } }); InsertPersonInfoWindow = Ext.extend(Ext.Window,{ form:null, constructor:function(){ this.form = new PersonInfoFormPanel(); InsertPersonInfoWindow.superclass.constructor.call(this,{ title:"添加人员", closeAction:"hide", height:155, width:240, modal:true, plain:true, resizable:false, items:this.form, buttons:[ { text:"确定", handler:function(){ this.onSubmitClick(); }, scope:this },{ text:"取消", handler:function(){ this.onCancelClick(); }, scope:this } ] }); this.addEvents("submit"); }, close:function(){ this.form.reset(); this.hide(); }, onSubmitClick:function(){ try{ this.fireEvent("submit",this,this.form.getValues()); }catch(e){ Ext.Msg.alert("错误",e); } }, onCancelClick:function(){ this.close(); } }); PersonListGridPanel = Ext.extend(Ext.grid.GridPanel,{ InsertWindow:null, constructor:function(){ this.InsertWindow = new InsertPersonInfoWindow(); PersonListGridPanel.superclass.constructor.call(this,{ id:"grid", width:240, autoHeight:true, tbar:[ { text:"添加", handler:function(){ this.InsertWindow.show(); this.InsertWindow.on("submit",function(_window,_record){ Ext.Ajax.request({ url:"test5.pfv", params:_record.data, success:function(_response){ Ext.getCmp("grid").getStore().add( new Ext.data.Record(Ext.util.JSON.decode(_response.responseText))); _window.close(); } }); }); }, scope:this },"-", {text:"修改"},"-", {text:"删除"} ], columns:[ {header:"姓名",dataIndex:"name",width:80}, {header:"性别",dataIndex:"sex",width:80}, {header:"年龄",dataIndex:"age",width:80} ], store:new Ext.data.JsonStore({ autoLoad:true, fields:["name","sex","age"], url:"test4.pfv" }), sm:new Ext.grid.RowSelectionModel({ singleSelect:true, listeners:{ "rowselect":{ fn:function(_rsm,_index,_record){ this.fireEvent("rowselect",_record); }, scope:this } } }) }); this.addEvents("rowselect"); } }); Ext.onReady(function(){ var _grid = new PersonListGridPanel(); // var _form = new PersonViewFormPanel(); var _window = new Ext.Window({ renderTo:Ext.getBody(), title:"测试组件化编程", resizable:false, plain:true, frame:true, items:[ _grid ] }); _window.show(); // _grid.on("rowselect",function(_record){ // this.getForm().loadRecord(_record); // },_form); }); [/code] [code="java"] @RequestMapping(value="/test5.pfv") public void test5(HttpServletRequest request, HttpServletResponse response) throws Exception { String name = request.getParameter("name"); String sex = request.getParameter("sex"); String age = request.getParameter("age"); Map<String, String> map = new HashMap<String, String>(); map.put("name", name); map.put("sex", "0".equals(sex)?"男":"女"); map.put("age", age); JSON json = JSONObject.fromObject(map); json.write(response.getWriter()); [/code] [b]问题补充:[/b] 回复1楼,如果我把Ext.Ajax.request注掉,直接把record add到store里面又没有问题,不存在多次执行操作的问题
完整EXTJS一段代码,我这里GRID死活不显示数据。哪位朋友帮忙看看。
[code="java"] Ext.onReady(function() { Ext.ns('app.grid'); var xg = Ext.grid; var detailViewReader = new Ext.data.JsonReader({ idProperty: 'autoid', root : 'items', totalProperty: "results", fields: [ {name: 'autoid', type: 'int',mapping:'autoid'}, {name: 'usePlanAutoId', type: 'int',mapping:'usePlanAutoId'}, {name: 'itemName', type: 'string',mapping:'itemName'}, {name: 'itemMoney', type: 'float',mapping:'itemMoney'}, {name: 'remark', type: 'string',mapping:'remark'} ] }); var detailViewStore = new Ext.data.JsonStore({ autoLoad: true, reader: detailViewReader, //url : _path +"servlet/UsePlanDetailServlet?sign=json", url : "test.json", method : 'POST', sortInfo: {field: 'autoid', direction: 'ASC'}, params:{ "capitalUsePlanAutoId" : "" } }); var pagingtoolbar = new Ext.PagingToolbar({ pageSize:_pageSize, store:detailViewStore, displayInfo:true, displayMsg: '从{0}至{1},共{2}条记录', emptyMsg:"No records to display" }); var detailViewGrid = new xg.GridPanel({ store: detailViewStore, columns: [ new Ext.grid.RowNumberer(), { header: '内码', dataIndex: 'autoid', width: 40, sortable: true },{ header: 'usePlanAutoId', dataIndex: 'usePlanAutoId', width: 40, sortable: true, hidden : true },{ header: '项目名称', dataIndex: 'itemName', width: 150, sortable: true },{ xtype: 'numbercolumn', header: '金额', dataIndex: 'itemMoney', format: '$0,0.00', width: 100 },{ header: '备注', dataIndex: 'remark', align: 'center', width: 150 } ], id: "usePlanDetailViewGrid", //totalProperty:"results", //frame: true, width: 800, height: 450, //region : "center", //clicksToEdit: 1, collapsible: false, //animCollapse: false, //trackMouseOver: false, bbar : pagingtoolbar, //enableColumnMove: false, iconCls: 'icon-grid' }); var CapitalUsePlanDetail = new Ext.Panel( { id : "UsePlanDetailOperationWin", title : "明细", iconCls : "btn-operation", width : 600, height : 500, closeAction: 'hide', region : 'center', items : [ detailViewGrid ] }); new Ext.Viewport( { layout : 'border', title : 'tttt', items : [ CapitalUsePlanDetail ], renderTo : Ext.getBody() }) }); [/code]
Dwr调用Java类,返回的JavaBean在前台Extjs中的类型问题
[b]1:需要返回的JavaBean[/b]: [code="java"] package cn.dzq.test; public class info { private long id; private String name; private int sex; private String email; private String tel; private String addTime; private String descn; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getSex() { return sex; } public void setSex(int sex) { this.sex = sex; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getTel() { return tel; } public void setTel(String tel) { this.tel = tel; } public String getAddTime() { return addTime; } public void setAddTime(String addTime) { this.addTime = addTime; } public String getDescn() { return descn; } public void setDescn(String descn) { this.descn = descn; } @Override public boolean equals(Object obj) { if(obj instanceof info){ info in=((info)obj); if((in.getId()==this.id)&&(in.getName().equals(this.name))&&(in.getSex()==this.sex)&&(in.getDescn().equals(this.descn))&&(in.getAddTime().equals(this.getAddTime()))&&(in.getTel().equals(this.tel))) { return true; } } return false; } @Override public String toString() { return this.id+"\t"+this.name; } } [/code] [b]2:Dwr调用的后台方法类:[/b] [code="java"] package cn.dzq.test; import java.util.List; import org.springframework.orm.hibernate3.support.HibernateDaoSupport; public class InfoManager extends HibernateDaoSupport{ public List<info> getResult() { List<info> list=this.getHibernateTemplate().find(" from info"); for(int i=0;i<list.size();i++){ System.out.println(i+":\t"+((info)list.get(i)).getName()); //验证返回的List不为空 } return list; } } [/code] [b]3:Spring,hibernate,以及dwr与sring的整合的配置都没有问题,我把dwr的配置片段放在下面(其他部分没有错误)[/b] [code="java"] <create javascript="info" creator="spring"> <param name="beanName" value="test1"></param> </create> <create match="cn.dzq.test.info" converter="bean"/> [/code] [b]4:前台ExtJs测试代码片段(我前台是个grid想在这里直接用store.loadData(data)装载数据,):[/b] [code="java"] Ext.onReady(function() { var cm = new Ext.grid.ColumnModel([ { header : '编号', dataIndex : 'id' }, { header : '名称', dataIndex : 'name' }, { header : '性别', dataIndex : 'sex' }, { header : '邮箱', dataIndex : 'email' }, { header : '电话', dataIndex : 'tel' }, { header : '添加时间', dataIndex : 'addTime' }, { header : '备注', dataIndex : 'descn' } ]); var store = new Ext.data.JsonStore({ fields : ['id', 'name', 'sex', 'email', 'tel','addTime', 'descn'] }); // 调用DWR取得数据 info.getResult(function(data) { alert(data);//问题就在和这里,alert的只有一个逗号 for(var i=0;i<data.length;i++){ alert(data[i]); /*每次循环的结果都是null,但当换成String是可以打出来 我分析是在这里不识别后台的bean 但是我的都配置了啊,不知道什么原因???*/ } alert("data:" + data); store.loadData(data); }); var grid = new Ext.grid.GridPanel({ renderTo : 'grid', store : store, cm : cm }); }) [/code] [b]5:我的问题是:[/b] 这个时候前台答应出来的data只有一个逗号,循环data发现每项都是空的,但这个时候后台返回的list确实不是空的。 我另外写了测试代码,要是返回的是基本类型,或者是String在前台就可以直接调用,那么对于这种bean的返回怎么处理? 我配置了转换器:<create match="cn.dzq.test.info" converter="bean"/> 怎么没有起到作用啊? 请各位帮忙看看,现在这里谢了。 [b]问题补充:[/b] 楼上这位哥们【hiphunter921 (初级程序员)】 你的写法我试过了 还是不对的 问题的本质不是怎么在前台循环后台来的List 而是在前台就根本不识别后台的JavaBean 即:List<info> [b]问题补充:[/b] 哈哈 太幼稚了 都是粗心惹得祸 我一直把 <create match="cn.dzq.test.Info" converter="bean"/> 看成: <convert match="cn.dzq.test.Info" converter="bean"/> 多谢路上哥们(hiphunter921 )指点 散分了
ext表格分页不成功, 显示有22条记录,一共两页,但是却把所有数据都放在同一页上显示了.
如图所示: [img]http://dl.iteye.com/upload/attachment/186170/9ac17176-f3d8-3d25-b5c6-cecb308cd9e3.jpg[/img] 我计划每页显示20天, 查询出22条记录, 应该把多余的放在第二页显示. 但是实际上所有数据都出现在第一页了. 我的关键代码: 1. 定义了store. 分页参数是0,20 [code="js"] var store = new Ext.data.JsonStore({ url:'xxxxx', baseParams:{start:0, limit:20}, totalProperty: "totalProperty", root: "root", idProperty: "MYID", fields:[ {name: 'MYID', mapping: 'MYID'} ... ] }); [/code] 2. pageingToolbar. 每页限制20条. 使用的store:store [code="js"] bbar: new Ext.PagingToolbar({ pageSize:20 ,store:store ,displayInfo:true ,displayMsg:'显示第{0}数据到{1},一共有{2}条' ,emptyMsg:'没有记录' }); [/code] 3. java中返回给store的方法构造如下 [code="java"] // 查询得到所有记录 List<Map<String, Object>> resultList = sqlMapClient.queryForList("abc"); if(null == resultList){return null;} // 组装返回结果 Map<String, Object> resultMap = new HashMap<String, Object>(); // 记录条数 resultMap.put("totalProperty", resultList.size()); // root resultMap.put("root", resultList); // MYID是我记录中的一个字段 resultMap.put("id", "MYID"); // 然后将这个resultMap转为json返回给前台 [/code] 不明白, 为什么我的分页不成功, 我拿官网上列子和我对比, 也没找到区别.. 另外再多请教一个问题, EXT的分页是内存分页么. 我看官网的例子[url]http://www.extjs.com/deploy/dev/examples/grid/paging.html[/url], 它访问的URL中有6000多的记录. 这么多记录全加到内存中再分页的? [b]问题补充:[/b] ------------------------------------------------------- OK. hearken01: 你的意思是 [code="java"] for(int i = start; i < (list.size() - limit) > 0 ? limit : list.size(); i++) { // then return these results ? } [/code] 这是内存分页的做法.. 定义了baseParams:{start:0, limit:20} 当点下了下一页的时候, 使start = 21. and go on 既然, start limit已经被传到了java中, 那我可否更进一步, 赋给SQL [code="sql"] select * from mytab where offset = #start# and limit = #limit# [/code] 这就是数据库分页了. [color=red]但是这样有个问题.. 怎么才能到最后一页呢[/color] [b]问题补充:[/b] 如果使用了数据库分页的话, 返回的总是当前页数据, 无法计算totalProperty, 也就不知道有几页了啊~ [b]问题补充:[/b] 谢谢, 我已经做出来了. 最后采用的数据库分页. 方法是: 1. 把start, limit一直传到sql中, 数据库查询出记录. 2. 多写一条SQL. 把记录总条数查出来. 3. 组转一个Map. root指向记录集合. totalProperty指向总条数. 这样, 每次点上一页, 下一页就能数据库分页. 压力转移到了数据库上. 不过这样做还有个暇疵. 每次查询的时候, 都要多一条SQL去查总记录数. 由于查询是不加锁的, 万一当我查询出记录后, 另一个操作把记录全干掉...就那啥杯具了. 不知大大有啥好办法没?
extjs ColumnChart 怎么设置不同的颜色啊??
[color=red][b]下面代码有两根柱子.一个是显示工单数的一个是显示阀值的...现在要做的是如果工单数>=阀值则后面柱子的颜色还成其他的颜色..知道能不能做到[/b][/color] [code="java"] Ext.onReady(function(){ //定义store var chartStore = new Ext.data.JsonStore({ root:'root', fields:[ {name:'ne',type:'string'},//网元 {name:'confine',type:'int'},//阀值 {name:'bill',type:'string'}//工单数 ], sortInfo:{field: 'bill', direction: 'ASC'} }); //测试数据 var obj={ root:[ {ne:'网元一',confine:80,bill:150}, {ne:'网元二',confine:150,bill:140}, {ne:'网元三',confine:180,bill:160}, {ne:'网元五',confine:120,bill:180}, {ne:'网元六',confine:165,bill:13}, {ne:'网元七',confine:54,bill:12}, {ne:'网元八',confine:55,bill:44}, {ne:'网元九',confine:33,bill:113}, {ne:'网元十',confine:122,bill:77} ] } //载入数据 chartStore.loadData(obj); //pushlet 回调函数 window.onData = function (event) { //alert(event.get("data1")); var obj1 = eval('('+event.get("data1")+')'); //obj=obj1; //chartStore.loadData(obj); } // 系统属性定义列数据模型 var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {header:'网元',dataIndex:'ne'}, {header:'工单量',dataIndex:'bill',renderer:function(value, cellMeta, record, rowIndex, columnIndex, store){ var confine = record.data['confine']; /*if(value>=confine){ //cellMeta.css='x-grid-back-red'; var row = cm.findColumnIndex(rowIndex); row.css='x-grid-back-red'; }*/ return value; }}, {header:'阀值',dataIndex:'confine'} //{header:'操作',dataIndex:'state',renderer:renderOperate} ]); var grid = new Ext.grid.EditorGridPanel({ title:'工单积压监控统计', cm:cm, store:chartStore, sm : new Ext.grid.RowSelectionModel({ singleSelect : true }), stripeRows:true, loadMask:true, clicksToEdit : 2,//双击触发, enableColumnMove : false, trackMouseOver : false, stripeRows:true, frame:true, loadMask:{ msg:"数据加载中....." }, viewConfig:{ forceFit:true, columnsText:'显示列', scrollOffset:25, sortAscText:'升序', sortDescText:'降序' }, autoExpandColumn:'desc', bbar:new Ext.PagingToolbar({ pageSize:24, store:chartStore, displayInfo:true, displayMsg:'显示第 {0} 条到第 {1} 条记录,总共 {2} 条', emptyMsg:'无记录' }), viewConfig:{forceFit:true,sortAscText:'正序',sortDescText:'降序', getRowClass : function(record,rowIndex,rowParams,store){ if(record.data.bill>=record.data.confine){ return 'x-grid-back-red'; } } } }); var linechart = new Ext.chart.LineChart({ title:'工单积压图表', xtype:'linechart', url: AIUPP_ROOT+'/css/resources/charts.swf', store:chartStore, //xField: 'label', //yField:'alarmCount', //定义tip内容 tipRenderer : function(chart, record){ //alert(record.get('startTime')); var ne = record.get('ne'); var str = String.format('网元:{0}\n工单量:{1}\n阀值:{2}',ne,record.get('bill'),record.get('confine')) return str; }, //定义两个图表,一个是柱状图,一个是折线图 series: [{ type: 'column', displayName: '工单个数', id:"billId", xField: 'ne', yField: 'bill', style: { color:0x99BBE8, size: 20 } },{ type:'column', displayName: '阀值', xField: 'ne', yField: 'confine', style: { color: '#ff0000', size: 20 } }], listeners:{ "show":function(){ var c = linechart.series; //alert(c[1].store); //c[1].style.color='#00ff00'; } }, //定义图表样式 chartStyle: { legend:{ display: "top" }, xAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length:4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines:{size: 1, color: 0xeeeeee} }, yAxis: { color: 0x69aBc8, majorTicks: {color: 0x69aBc8, length: 4}, minorTicks: {color: 0x69aBc8, length: 2}, majorGridLines: {size: 1, color: 0xdfe8f6} } } }); var contentPanel = new Ext.TabPanel({ region:'center', enableTabScroll:true, activeTab:0, closable:false, split : false, collapsible : false, layoutOnTabChange:true, items:[linechart,grid] }); // 间隔时间 var interval = new Ext.form.TextField({ name:'interval', fieldLabel:'间隔时间', id:"searchInterval" }); // 分组方式 var groupType = new Ext.form.RadioGroup({ name:'groupType', fieldLabel:'分组方式', id:"searchGroupType", items:[ new Ext.form.Radio({ name:"groupType", inputValue:"1", boxLabel:"地区" }), new Ext.form.Radio({ name:"groupType", inputValue:"2", boxLabel:"地区+网元" }), new Ext.form.Radio({ name:"groupType", inputValue:"3", boxLabel:"地区+网元+业务代码" }) ] }); // 开始按钮 var startBtn = new Ext.Button({ text:'开始', minWidth:80, handler:function(){ //store.load(); } }); // 停止按钮 var stopBtn = new Ext.Button({ text:'停止', minWidth:80, handler:function(){ //store.load(); } }); var searchPanel = new Ext.form.FormPanel({ labelAlign:'left', labelWidth:60, frame:true, layout:'column', items:[ {columnWidth:.28,layout:'form',items:[interval]}, {columnWidth:.38,layout:'form',items:[groupType]}, {columnWidth:.10,layout:'form',items:[startBtn]}, {columnWidth:.16,layout:'form',items:[stopBtn]} ] }); var vp = new Ext.Viewport({ layout:'border', border:false, hideBorders:true, bufferResize:100, items:[ //{region:'north',title:'::监控条件',autoHeight:true,margins:'5 5 10 5',collapsible:true,items:[searchPanel]}, {region:'center',layout:'fit',margins:'5 5 5 5',items:[contentPanel]} ] }); vp.show(); }); [/code]
XTemplate 事件问题
[b]我想要在XTtemplate中添加一个链接的单击事件,当点击链接在同一页面的另一个Panel中显示数据并重新加载,请问怎么做呀?[/b] [color=blue]XTtemplate中自带的事件不行,因为它在进入页面时就加载了,我要点击之后才加载。[/color] 下面的我的[b]ExtJS代码[/b]: createFlowConsole : function() { var data = ['actionId','name']; this.store = new Ext.data.JsonStore({ url: _ctx.base + '/osworkeflow/getAvailableActions.action', root:'action', fields: data }); var xtpl = new Ext.XTemplate( '<tpl for=".">', '<tpl if="xindex % 2 == 1">', '<div class="x-grid3-cell-inner" style="font-size:10px; background-color:#FFFFFF; border-bottom:1px solid #EDEDED"">', '<span class="" style=" padding-left:30px;"><a id="showMySteps" href="javaScript: onclick={[this.test()]}">{name}</a></span></div>', '</tpl>', '<tpl if="xindex % 2 == 0">', '<div class="x-grid3-cell-inner" style="font-size:10px; background-color:#FAFAFA; border-bottom:1px solid #EDEDED"">', '<span class="" style=" padding-left:30px;"><a href="#">{name}</a></span></div>', '</tpl>', '</tpl>',{ test : function(){ alert("ok"); } } ); this.availableActionsPanel = new Ext.Panel( { id : 'mySteps_panel', region : 'north', title : '我的步骤', margins : '0 0 5 0', height : 150, items: new Ext.DataView({ store: this.store, tpl: xtpl, autoHeight:true, multiSelect: true, overClass:'x-view-over', itemSelector:'div.thumb-wrap', emptyText: 'No data to display' }) }); this.steps = this.createSetpsGrid(); var flowConsole = new Ext.Panel( { region : 'center', layout : "border", border : false, items : [ this.availableActionsPanel, this.steps ], margins : '5 5 5 0' }); return flowConsole; } 详细如下附件图所示 :
ext在组件化设计的时候formpanel重用的问题
才学extjs没多久,js也不是太好,自己试着做了个例子,发现有点问题,如图 [img]http://dl.iteye.com/upload/attachment/194645/de7a5b07-eb40-3258-807a-cc3e1659d49b.jpg[/img] 点击insert就弹出insert的window,这个时候没有问题,进行操作,或者点击cancel后,再点update就变成这样了 [img]http://dl.iteye.com/upload/attachment/194647/9a4b55df-0890-3c10-8973-28a82bbff418.jpg[/img] 应为两个window里的formpanel都是同一个,但是在每个window里panel都是new出来的 [code="js"] PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel,{ constructor:function(){ this.addEvents("insert"); this.addEvents("update"); PersonInfoFormPanel.superclass.constructor.call(this,{ layout:"form", defaultType:"textfield", bodyStyle:"padding:5px", baseCls:"x-plain", autoHeight:true, defaults:{width:135}, width:220, labelWidth:45, items:[ { fieldLabel:"name", name:"name", id:"name", emptyText:"name is not null", blankText:"name is not null", allowBlank:false },{ fieldLabel:"age", name:"age", id:"age", emptyText:"age is not null", blankText:"age is not null", allowBlank:false },{ xtype:"combo", fieldLabel:"sex", name:"sexMc", id:"sexMc", hiddenName:"sexDm", displayField:"sexMc", valueField:"sexDm", mode:"local", triggerAction:"all", emptyText:"sex is not null", blankText:"sex is not null", allowBlank:false, editable:false, store:new Ext.data.JsonStore({ fields:["sexMc","sexDm"], data:[ {sexMc:"men",sexDm:1}, {sexMc:"women",sexDm:2} ] }) } ] }); }, setValues:function(_record){ this.getForm().loadRecord(_record); }, getValues:function(){ if(this.getForm().isValid()) return this.getForm().getValues(); else throw Error(); }, onInsert:function(){ try{ this.fireEvent("insert",this,this.getValues()) }catch(e){ return; } }, onUpdate:function(){ try{ this.fireEvent("update",this,this.getValues()) }catch(e){ return; } } }); PersonViewGridPanel = Ext.extend(Ext.grid.GridPanel,{ insertWin:null, updateWin:null, constructor:function(){ this.insertWin = new InsertPersonInfoWindow(); this.updateWin = new UpdatePersonInfoWindow(); PersonViewGridPanel.superclass.constructor.call(this,{ autoHeight:true, width:240, columns:[ {header:"name",dataIndex:"name",width:80}, {header:"age",dataIndex:"age",width:80}, {header:"sex",dataIndex:"sexMc",width:80}, {dataIndex:"sexDm",hidden:true} ], tbar:[ { text:"insert", handler:function(){ this.insertWin.show(); }, scope:this },"-",{ text:"update", handler:function(){ if(this.getSelectionModel().getCount()==1){ this.updateWin.show(); this.updateWin.form.setValues(this.getSelectionModel().getSelected()); } }, scope:this },"-",{ text:"delete", handler:function(){ var _record = this.getSelectionModel().getSelected(); Ext.Ajax.request({ url:"test8.pfv", params:_record.data, success:function(){ this.getStore().remove(_record); }, scope:this }); }, scope:this } ], store:new Ext.data.JsonStore({ autoLoad:true, url:"test7.pfv", fields:["name","age","sexMc","sexDm"] }), sm:new Ext.grid.RowSelectionModel({ singleSelect:true }) }); this.insertWin.form.on("insert",function(_form,_values){ _form.getForm().submit({ url:"test8.pfv", success:function(_f,_a){ this.getStore().add(new Ext.data.Record(_a.result)); this.insertWin.hide(); this.insertWin.form.getForm().reset(); }, scope:this }); },this); this.updateWin.form.on("update",function(_form,_values){ _form.getForm().submit({ url:"test8.pfv", success:function(_f,_a){ var _value = _a.result; var _record = this.getSelectionModel().getSelected(); for(var _key in _value){ _record.set(_key,_value[_key]); } _record.commit(); this.updateWin.hide(); this.updateWin.form.getForm().reset(); }, scope:this }); },this); } }); PersonViewWindow = Ext.extend(Ext.Window,{ grid:null, constructor:function(){ this.grid = new PersonViewGridPanel(); PersonViewWindow.superclass.constructor.call(this,{ title:"测试组件化编程", resizable:false, items:this.grid }); } }); InsertPersonInfoWindow = Ext.extend(Ext.Window,{ form:null, constructor:function(){ this.form = new PersonInfoFormPanel(); InsertPersonInfoWindow.superclass.constructor.call(this,{ title:"insert", closeAction:"hide", modal:true, plain:true, resizable:false, items:this.form, buttons:[ { text:"submit", handler:function(){ this.form.onInsert(); }, scope:this },{ text:"cancel", handler:function(){ this.hide(); this.form.getForm().reset(); }, scope:this } ] }); } }); UpdatePersonInfoWindow = Ext.extend(Ext.Window,{ form:null, constructor:function(){ this.form = new PersonInfoFormPanel(); UpdatePersonInfoWindow.superclass.constructor.call(this,{ title:"update", closeAction:"hide", modal:true, plain:true, resizable:false, items:this.form, buttons:[ { text:"submit", handler:function(){ this.form.onUpdate(); }, scope:this },{ text:"cancel", handler:function(){ this.hide(); this.form.getForm().reset(); }, scope:this } ] }); } }); Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "side"; new PersonViewWindow().show(); }); [/code] 看了很久了,不知道要怎么改,大家给点意见,工程我已经上传上来了
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
【JSON解析】浅谈JSONObject的使用
简介 在程序开发过程中,在参数传递,函数返回值等方面,越来越多的使用JSON。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,同时也易于机器解析和生成、易于理解、阅读和撰写,而且Json采用完全独立于语言的文本格式,这使得Json成为理想的数据交换语言。 JSON建构于两种结构: “名称/值”对的集合(A Collection of name/va...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
Java 14 都快来了,为什么还有这么多人固守Java 8?
从Java 9开始,Java版本的发布就让人眼花缭乱了。每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份,...
达摩院十大科技趋势发布:2020 非同小可!
【CSDN编者按】1月2日,阿里巴巴发布《达摩院2020十大科技趋势》,十大科技趋势分别是:人工智能从感知智能向认知智能演进;计算存储一体化突破AI算力瓶颈;工业互联网的超融合;机器间大规模协作成为可能;模块化降低芯片设计门槛;规模化生产级区块链应用将走入大众;量子计算进入攻坚期;新材料推动半导体器件革新;保护数据隐私的AI技术将加速落地;云成为IT技术创新的中心 。 新的画卷,正在徐徐展开。...
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
讲真,这两个IDE插件,可以让你写出质量杠杠的代码
周末躺在床上看《拯救大兵瑞恩》 周末在闲逛的时候,发现了两个优秀的 IDE 插件,据说可以提高代码的质量,我就安装了一下,试了试以后发现,确实很不错,就推荐给大家。 01、Alibaba Java 代码规范插件 《阿里巴巴 Java 开发手册》,相信大家都不会感到陌生,其 IDEA 插件的下载次数据说达到了 80 万次,我今天又贡献了一次。嘿嘿。 该项目的插件地址: https://github....
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
立即提问