⑴ extjs4 中combobox如何设置默认值。
extjs的combox设置默认选中第一行确实是一件痛苦的事情。专。。
我自己是这样做的
var store = Ext.create('Ext.data.Store', {
fields: ['键值']
proxy: {
type: 'ajax',
url: 'xxx.php',
reader: {type: 'json'}
}
});
ComboBox = Ext.create('Ext.form.ComboBox', {
store: store,
//参数
});
//监听load事件属
store.on('load', function(){
ComboBox.select(store.getAt(0));
});监听事件写到Ext.onReady(function(){});中
⑵ 如何让Extjs4.1中的treegrid和treestore实现分页
Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。
[javascript] view plain
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '项目立项',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);
this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
});
this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});
this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this['columns'] = [ {
xtype : 'treecolumn',
text : '项目性质',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '项目名称',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程状态',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '项目时间',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '项目编号',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '项目单位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '优先级',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '项目类型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '项目内容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件数',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入项目') {
return 'srcss';
} else if (record.get("proClass") == '支出项目') {
return 'zccss';
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '项目名称：', {
xtype : 'textfield',
width : 70
}, '无分项总体项目显示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查询",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高级查询",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.items.items[0].value;
_param.proClass = _tbar.items.items[2].value;
_param.proName = _tbar.items.items[5].value;
_param.isShow = _tbar.items.items[7].value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_tbar.items.items[0].setValue('项目立项');
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
process : '项目立项',
isShow : 'false'
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '项目立项'
}).show();
}
});
⑶ 最近在学习CEF3，里面有一个cefclient例子，用它运行extjs库很卡，求教
1变种DS =新Ext.data.Store（{
2代理：新Ext.data.ScriptTagProxy（{
3网址：'yoururl.json'
4}）， 5阅读：新Ext.data.JsonReader（{
6根：“字段”，
7 totalProperty：'客流量'，
8 ID：'身份证'
9} [
10 {名：“字段”，映射：'域'}，
11 {名称：'身份证'，映射：'身份证'}
12]）
13}）;
14无功组合框=新Ext.form.ComboBox（{
15名：“组合框”，
16 X：0，
17 Y：20， 18商店：DA，
19 displayField：'域'，
20 TYPEAHEAD：假的，
21 loadingText：'字段被加载中...'，
22 forceSelection：假的，
23的TriggerAction：'所有'，
24 hideTrigger：假的，
25 minChars：1，
26主播：'100％'，
27每页：10
28}）;
JSON输出
注stcCallback1007输出请求使用该程序在回调的参数的值
stcCallback1007（{“客流量” ：10，“字段”：[{ID：0，场：'A'}，{ID：1，字段：'B'}，{ID：2，现场：'C'}，{ID：3，现场：'D'}，{ID：4，现场：'E'}，{ID：5场：'F'}，{ID：6场：'G'}，{ID：7场：' H'}，{ID：8场：“我'}]}）; stcCallback1007（{”客流量“：10，”字段“：[{ID：0，场：'A'}，{ID：1，现场：'B'}，{ID：2，现场：'C'}，{ID：3，现场：'D'}，{ID：4，现场：'E'}，{ID：5场： 'F'}，{ID：6场：'G'}，{ID：7场：'H'}，{ID：8场：“我'}]}）; stcCallback1007（{”客流量“ ：10，“字段”：[{ID：0，场：'A'}，{ID：1，字段：'B'}，{ID：2，现场：'C'}，{ID：3，现场：'D'}，{ID：4，现场：'E'}，{ID：5场：'F'}，{ID：6场：'G'}，{ID：7场：' H'}，{ID：8场：“我'}]}）;
对不起，错了，下面是一个网格
/ /创建数据存储
变种singleTablestore =新Ext.data.JsonStore（{
根：'主题'，
totalProperty：'客流量'，
idProperty：'TABLEID'，
remoteSort：真，字段：[
{名称：'TABLEID“，键入：'诠释'}，'名'，'描述'，'importdate'
]
/ /加载使用脚本标签为跨域，如果在同一个域中
代理服务器中的数据：新Ext.data.ScriptTagProxy（{
URL：'ABC JSON。“}）
}）;
singleTablestore.setDefaultSort（'日期'，'DESC'）;
单表的VaR =新的分机。 grid.EditorGridPanel（{
ID：'单表面板“，
布局：'锚'，
主播：['100％'，'100％']，
标题：“单一数据处理表”，
店：singleTablestore，
/ / trackMouseOver：假的，
/ / disableSelection：真的，
loadMask：真的，
的滚动条：真的，
/ /网格列
列：[{
ID：'名称'，
头：“数据表名”，
dataIndex：'名称' ，
宽度：200
排序：真的，
渲染器：renderTips
}，{
ID：？'描述'，/ / ID分配，所以我们可以应用自定义的CSS（如：X-格-COL-议题B {颜色：＃333}。）
头：“数据表描述”，
dataIndex：'描述'，
渲染器：renderTips2 ，
编辑：新Ext.form.TextField（{风格：'高度：26px;的line-height：26px;显示：块;'}），
宽度：270
/ /渲染器：renderTopic，
排序：真
}，{
头：“进口日期”，
dataIndex：'importdate'，
宽度：150，排序：真
}，{
ID：'TABLEID'，
标题：“操作”，
dataIndex：'TABLEID'，
宽度：450，调整大小：假的，
/ /编辑：新Ext.Button（{文字：'文本'}）
渲染器：renderLast
/ /物品：[新Ext.Button（{文字：'文本'}）]
}]，
/ /自定义视图配置
viewConfig：{
/ / forceFit：真的，
enableRowBody：真， / / showPreview：真
}
/ /分页底部
吧BBAR：新Ext.PagingToolbar（{
每页：20，商店：singleTablestore，
displayInfo：真的，
displayMsg：'显示第{0} - {2} {1}“，
beforePageText：'首先'，
afterPageText：'{0}“，
emptyMsg：”没有合适的内容“，
项目：[
' - '，{
压：真的，
enableToggle ：真的，
文字：“展前预览”，
CLS：“X-BTN-文本图标的细节”，
toggleHandler：功能（BTN，按下）{
.. 。
]
}）
}）;
singleTable.on（'afteredit'，afterEdit，这一点）;
singleTable.on（ '秀'，函数（）{singleTablestore.load（{params：一个{开始：0，上限：20}}）;}，这一点）;
功能afterEdit（五）{
...
stcCallback1009（{“客流量”：17，“主题”：[{“TABLEID”：“42”，“姓名” ：“工作表Sheet1”，“说明”：“第一册”，“importdate”：“2011-01-20 15:00:48”}，{“TABLEID”：“42”，“姓名”：“工作表Sheet1”，“说明“：”第一册“，”importdate“：”2011-01 - 20十五时00分48秒“}]}）;