extjs6storeload

⑴ 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秒「}]}）;