Extjs 代码拾穗

1.tree grid 添加一行

var rootNode = store.getRootNode();
var newRecord = Ext.create('MatrixDlv',{"sdDlvrName":text});
rootNode.appendChild(newRecord);
var rowEditor = treeGrid.getPlugin('rowplugin');
rowEditor.startEdit(newRecord,0);

2. tree 加上这个的话，会把浏览器默认的弹出菜单禁用掉

 listeners: {
                   itemclick: function(view,rec,item,index,eventObj){
                       //treeItemClick(view,rec,item,index,eventObj);
                   }
                 ,itemcontextmenu: function(view, rec, node, index, e) {
                      //showTreeContextMenu(view, rec, node, index, e);
                      //e.stopEvent();
                      //treeContextMenu.showAt(e.getXY());
                     return false;
                 }
                }
  });

3. Grid filter 的添加方法

 var filters = {
                ftype: 'filters',
                encode: false, // json encode the filter query
                local: false,   // defaults to false (remote filtering)
                filters: [{
                    //type: 'boolean',
                    dataIndex: 'mtSWItmId'
                }]
        };

        var gridPanel =  Ext.create('Ext.grid.Panel',{
                     id:'CriteriaSeaGrid',
                     height: 600,
                    store: gridStore,
                    features:[filters],

4.图形可以控制點擊的時間間隔

              iChart.series.items[0].listeners.itemmousedown=
                        {
                                buffer: 500,

5. Legend 的 Display的修改

Legend 的 Display 可以通过设置 title 来修改
iChart.series.items[1].title ="11";

6. Sencha cmd- 打包指定的 js 档

sencha -sdk sdk compile \
exclude -namespace Ext.chart and \
concat ext-all-nocharts-debug-w-comments.js and \
-debug=true \
concat -strip ext-all-nocharts-debug.js and \
-debug=false \
concat -yui ext-all-nocharts.js

实例：

D:>sencha -sdk extjs compile -deb
ug=false concat -yui extjs\test\cmd\ext-all.js

排除Ext.chart
D:>sencha -sdk extjs compile excl
ude -namespace Ext.chart and -debug=false concat -yui extjs\test\cmd\ext-all-noc
harts.js

include -namespace Ext.grid,Ext.chart

7. 看起来extjs 的 tab url load 会把注释的部分的文件也load 进来

js 会导入
css 不会导入

8. 动态加入CSS文件

swapStyleSheet

if(Ext.get('userSelect')==null)
{
Ext.util.CSS.swapStyleSheet('userSelect','css/UserSelectWindow.css');
}

9. Extjs 导入

Ext.require 有缓存
Ext.Loader.loadScript({ url: scriptpath,scope:this}); 没有缓存

Ext.require 也可以直接导入js

10.动态导入

Ext.Loader.setConfig({enabled:true,paths:{'App.ux':'lib'}});
function play()
{
        Ext.require(['App.ux.MusicWin'],function(){
                var s = new App.ux.MusicWin();
                s.play();
        });
}

Ext.Loader.setConfig("disableCaching", false);

11. combobox

Extjs 设置 typeAhead 则会有自动带出选择项的功能
Extjs 的 Commobox key 入字符自动带出选择项看上去要字符大于等于 4的时候才会自动弹出。

minChars Number

下拉表框字段选择当前用户需要输入的最小字符数量

queryMode="remote"默认为4

queryMode="local"默认为0

editable=false会使自动完成功能失效

12. Combobox

combobox 的 queryCaching 设置是否每次都从服务器取数据

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});

var comboStore = Ext.create('Ext.data.Store', {
//model: 'User',
fields: ['firstName', 'lastName'],
data : [
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Jamie', lastName: 'Avins'}
]
});

combox 使用 model: 'User', 这种定义的store 会产生indexOf 的错误，必须使用 fields.
但是，如果使用ajax 的方式的话，用model: 'User' 又是可以的

下拉框可以直接使用以下方式
store = ['',''];

13. 零碎

Panel 的 frame 设置为true 会导致边框变粗

inputWidth 可以设置form field 输入框的长度

flex 定义grid 的相对宽度。

stateful 这个配置就是缓存。下一次打开页面会保存。

有lock 的 grid 有两个view
lockedView 和normalView
gridViewId = treeGrid.getView().lockedView.getId();

找不到tab 中的js ，以 include 方式导入的
tab panel 以load 的方式得到

var grid = Ext.create('Ext.grid.Panel',{
plugins:[Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
pluginId:'cellplugin'
})]
});

//later on:
var plugin=grid.getPlugin('cellplugin');

deferEmptyText ：直到store 第一次load之后才显示空值的信息

position:relative 在IE下这个会导致ext js 的组件消失

class="x-hide-display"
<div id="west" class="x-hide-display">

14. 速度相关

速度提升建议

1.hide 栏位不要设置成可以editor
2.editor 栏位尽量显示

15. Grid Col

grid 如果已经有col(应该是有hide的col) 再执行reconfig 的话会出现hasEditor 的错误。
第一次定义的时候不能设置columns

对grid的col 进行hide方法，会导致速度很慢
看上去是会进行全局layout

.x-grid-dirty-cell
可以设置栏位有被修改过

Value Description
----- -----------------------------
tl The top left corner (default)
t The center of the top edge
tr The top right corner
l The center of the left edge
c In the center of the element
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner

得到header
grid.headerCt.getGridColumns

16. tab layout, 自动扩充的方法

region: 'center',
width: '100%',
height: '100%',
contentEl: 'maintabs',
listeners: {
resize: function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
{
if (tabpanel!=null)
{
tabpanel.doLayout();
alert("11");
}
}
}
initPage(thisObj,iWidth, iHeight, oldWidth, oldHeight);

if (adjWidth > 0 &&Math.abs(adjWidth - jQuery('#featureList').width()) > 5)
{
jQuery('#featureList').setGridWidth(adjWidth);
}

var initPage=function(thisObj,iWidth, iHeight, oldWidth, oldHeight)
{
var adjWidth = iWidth;
adjWidth = adjWidth - 10; // Fudge factor to prevent horizontal scrollbars
var docTree = Ext.getCmp("docTree");
if(docTree!=null)
{
docTree.setWidth(adjWidth);
}
};

17.String to obj

Ext.Ajax 使用 Ext.decode 把 string 转成 js object

18. Grid Col

grid add column
cols.push({
text: 'Text',
dataIndex: ''
});
treeGrid.reconfigure(store,cols);

grid col 的 tooltip
renderer :function(value, metadata,record) {
var disValue = value;
if(disValue!=null&&disValue.indexOf(",")>0)
{
disValue = disValue.replace(/,/g,"<br>");
}
metadata.tdAttr = 'data-qtip="' + disValue + '"';

return "<a href=''>"+value+"</a>";
}

grid 的 store 要给model 或是 field

grid 的col hearder 点击后变成可编辑的field
headerclick:function( ct, column, e, t, eOpts ){
// t.innerHTML = "<input style='height:15px' type=text value='2013/09/11'>";
//var spanId = t.id;
if(column.isInEdit!=null&&column.isInEdit===true)
{

}else{
var spanId = t.parentNode.id;
//alert(spanId);

var ddd = t.parentNode;
t.parentNode.className = "";
//alert(t.parentNode.className);
//alert(t.parentNode.innerHTML);
t.parentNode.innerHTML = "";

var datefield = Ext.create('Ext.form.field.Date',{
name: 'test',
id: 'test',
//format: 'm/d/Y',
format:'Y/m/d',
value:'2013/8/31',
width:100,
renderTo:spanId
});
column.isInEdit = true;
}
//alert(datefield.getEl());
//t.innerHTML = datefield;
}

19. Tooltip

要产生tooltip 先导入这句
Ext.tip.QuickTipManager.init();

20. Grid Col

Grid的 columns 的配置
如果配置align 为 left 和 right，编辑是正常的
如果配置成center 的话，编辑时会变成左对齐。
不知道这是否是Ext js 的bug
原因是： 107237 行只有
if (column.align === 'right') {
field.fieldStyle = 'text-align:right';
}
加上以下部分
if (column.align === 'center') {
field.fieldStyle = 'text-align:center';
}
就能解决问题了。

21. Store

store 中参数太多，就不能使用Get 方式了，要使用POST 方式

actionMethods: {create: 'POST', read: 'POST'},
否则会报： htmlfile unknown name 等unkonwn 信息
proxy:{
actionMethods: {create: 'POST', read: 'POST'},
type: 'ajax',
url : 'http://172.26.158.43:8080/dm_web/controller/mt_get_valid_values_link',
reader:{
type: 'json',
totalProperty : 'totalCount',
root : 'values'
},
extraParams:{
sdrcAttributeName : dynselId,
sdrcSystemFormDialogClassName : sDialogClassName,
sdrcSystemFormPersistentClassName : sClassName
}
},

22. Ext Loader

Ext loader 
</SCRIPT>

23. msg 的button可以重命名

msg 的button可以重命名

Ext.get('mb10').on('click', function(){
Ext.MessageBox.show({
title: 'What, really?',
msg: 'Are you sure?',
buttons: Ext.MessageBox.YESNO,
buttonText:{
yes: "Definitely!",
no: "No chance!"
},
fn: showResult
});
});

24. checkboxmodel 就可以使用check box 选择行

Tree前面的图标可以在json store 里面设置
iconCls

25. Tree的右键菜单

Tree的右键菜单。
必须调用e.stopEvent( ) ，否则同时会弹出浏览器的右键菜单效果
tree.on('itemcontextmenu', function(thisTree, record, item, index, e, eOpts ){
var menu1 = new Ext.menu.Menu({
items: [
{
text: 'Open in new tab'
}
]
});

//alert(node)
//treePanelCurrentNode = node;
//var x = e.getX();
//var y = e.getY();
//alert(x);
//alert(y);
menu1.showAt(e.getXY());
e.stopEvent( )
},this);
stopEvent( )
Stop the event (preventDefault and stopPropagation（停止传播）)

26. Form 的 css

Form 的 css设置
cls: 'mt-x-comp-body',
bodyCls: 'mt-x-comp-body',
两个要同时设置

27. 替换Sprite的Text

var sprite100 = Ext.create('Ext.draw.Sprite', {
type: 'text',
x: 100,
y: 100,
id: 'circleText',
font: '118px "monospace"',
//style:{fontWeight: 'bold'},
text: 'texttext'
});

Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
id: 'circleComp',
items: [{
type: 'circle',
radius: 90,
x: 100,
y: 100,
fill: 'blue'
//,text: 'texttext'
},sprite100]
});

必须要这样否则， sprite100的text 替换不掉

28. store

本地的store
var selStore = Ext.create('Ext.data.Store',{
model: 'User',
proxy: {
type: 'memory',
reader: {
type: 'json',
//model: 'User',
root : 'persons',
totalProperty : 'totalCount',
idProperty : 'employee_id'
}
}
});

store 的 proxy 的type 有
There are two main types of Proxy - Client and Server. The Client proxies save their data locally and include the following subclasses:

LocalStorageProxy - saves its data to localStorage if the browser supports it
SessionStorageProxy - saves its data to sessionStorage if the browsers supports it
MemoryProxy - holds data in memory only, any data is lost when the page is refreshed

The Server proxies save their data by sending requests to some remote server. These proxies include:

Ajax - sends requests to a server on the same domain
JsonP - uses JSON-P to send requests to a server on a different domain
Rest - uses RESTful HTTP methods (GET/PUT/POST/DELETE) to communicate with server
Direct - uses Ext.direct.Manager to send requests

29. 日期相关

var today = Ext.util.Format(new Date(),this.format);
this.activeDate = Ext.Date.clearTime(date);

Ext.Date.format(dt, Ext.Date.patterns.ShortDate)); --. data 和 string 是否是同样的问题。

String.format ==> Ext.String.format
是否在Ext 3中扩充了这个方法

Ext.menu.DateMenu.superclass.initComponent.call(this);

//this.picker.purgeListeners(); ==>
//this.picker.purgeAllListeners();
this.picker.clearListeners();

使用W 的话，日期选择会是本周的第一天。

Ext.menu.DateMenu == 》 Ext.menu.DatePicker

30. 其他

this.wrap.setWidth(this.el.getWidth() + allTriggerWidths); 这个该如何替换

var tw = this.trigger.getWidth(); ==》
var tw = this.getTriggerWidth();

//this.setValue = this.setValue.createSequence(this.updateHidden);
this.setValue = Ext.Function.createSequence(this.updateHidden,this.setValue);

Ext.Function.createSequence 接下来执行的函数

Extend ===> define

Ext.define('MyApp.CoolPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.coolpanel'],
title: 'Yeah!'
});
reg ==> alias

Extjs3
Ext.version ==> Ext.getVersion().toString()

Ext.loader.setPath("","")

rootvisible 后无法显示

使用ajax 取tree 数据时，如果节点设置成 leaf: false, 一定要加上 children配置,
否则当 children为空时，会循环取。配到expandAll 这种状况就挂了
docJsobj.put("leaf", false);
docJsobj.put("children", fileJsArray);

emptytext
deferEmptyText
True to defer emptyText being applied until the store's first load

Extjs 传递中文参数--》网络建议做法是前台，后台，文件都指定utf8编码，需测试

不是分页的store ,getTotalCount 为 0, 使用getCount

Ext.Loader
Ext.Loader.setConfig({enabled: true}); 设置这个才能动态加载类
Whether or not to enable the dynamic dependency loading feature.

ViewPort 是container 的子类，没有滚动条

Ext
view source
fly( dom, [named] ) : Ext.dom.Element.Fly2

Gets the singleton flyweight element, with the passed node as the active element.

getSelectionModel( )

selType: 'checkboxmodel',

Ext js 4 比Ext js 3要好，就是不用在使用input -hidden 了
Ext.create('Ext.form.ComboBox', {
inputId: 'mtAlignedMilstn2',
name:'mtAlignedMilstn2',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: cominputParent
// renderTo: 'mtAlignedMilstn2'
});

使用transform 不能设置 inputId

constrain:true, 限制window 不能拖出浏览器外

scripts : Boolean loader 是否可以执行脚本

initComponent 和 Constructor 的区别

hbox 设置间距
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
}

items: itemsjs, 这种方式需要指定xtype, Ext.action的xtype 不知道是什么？

Ext.useShims 用来遮挡，遮挡差别需研究
extjs3--> extjs4 的转变

comboInput.setVisibilityMode(2); display

grid.getSelectionModel().clearSelections(); ==> deselectAll(

rowcontextmenu ==> cellcontextmenu( this, td, cellIndex, record, tr, rowIndex, e, eOpts )

Model 需要加上idProperty
extend: 'Ext.data.Model',
idProperty: 'employee_id',

store reader id --> idProperty

getSelections( )==>getSelection( )

viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragText: 'Drag and drop to reorganize'
}
},
另外，还要定义Ext.dd.DropTarget

grid rowdblclick ==> celldblclick

loadDepartment(r.get("site"));==>
site.on("select", function(cb, r, idx) {
loadDepartment(r[0].get("site"));
});

reader : new Ext.data.ArrayReader({}, ['dept'])
proxy: {
type: 'jsonp',
url : httpServiceRoot + 'getDepts',
reader: {
type: 'array'
}
//callbackKey: 'theCallbackFunction'
}

HTML sel : applyTo --> transform

store.baseParams -->store.proxy.extraParams

1. Ext.reg ==> Ext.define
现在ExtJS使用Ext.define函数来创建组件类，该函数还能实现自动加载JS类（uses属性，需设置Ext.Loader为开启详见下文，看不懂看API），它会自动的完成以前的ns（namespace）功能。例如下面
Js代码收藏代码

Ext.ns("Foo.bar");

Foo.bar = Ext.extend(Ext.util.Observable,{
//your code here
});
Ext.reg("foobar",Foo.bar);
所以现在创建一个组件应该是这样的：
Js代码收藏代码

Ext.define("Foo.bar",{
extend : "xxxxxx",
alias : "widget.foobar"
//your code here
});

2.
现在ExtJS不再使用new关键字（当然你想用也没关系），而是推荐使用Ext.create函数来解决这个问题，例如以往我们创建一个组件的代码是
Js代码收藏代码

var win = new Ext.Window({
//some options
});
而现在则是
Js代码收藏代码

var win = Ext.create("Ext.window.Window",{
//some options
});

3. Ext.data.record==> Ext.data.Model

4.border 布局分为东南西北