ext笔记

命名

1.  
   The top-level namespaces and the actual class names should be CamelCased. Everything else should be all lower-cased. For example:MyCompany.form.action.AutoLoad
2.  
   path/to/src is the directory of your application’s classespath/to/src is the directory of your application’s classes
3.  
   Acceptable method names:encodeUsingMd5()
4.  
   Acceptable variable names:var isGoodName

声明

Ext.define(className, members, onClassCreated);

获取值

Ext.define()中的Config中的值可以用getXxx,setXxx来获取，注意驼峰命名

1.  
   config: {
2.  
   title: 'Title Here',
3.  
   bottomBar: {
4.  
   height: 50,
5.  
   resizable: false
6.  
   }
7.  
   }

技能

加上事件

下面例子就加上了click事件

1.  
   var container = Ext.create('Ext.Container', {
2.  
   renderTo: Ext.getBody(),
3.  
   html: 'Click Me!',
4.  
   listeners: {
5.  
   click: function(){
6.  
   Ext.Msg.alert('I have been clicked!')
7.  
   }
8.  
   }
9.  
   });
10.  
    container.getEl().on('click', function(){
11.  
    this.fireEvent('click', container);
12.  
    }, container);

widget not found

sencha app build

以上是打包的命令，运行后在build文件夹中会有production文件夹，东西都在那里面。
进去找到index.html点开后，如果报错，列如 widget/tabpanel.js 404 not found这种，那就找到用到tabpanel的地方，一般是因为你 xtype:tabpanel 这种地方，然后在相应的文件中，require下对应的名称即可，以tabpanel为例,requier写法如下：

1.  
   requires: [
2.  
   'Ext.container.Container',
3.  
   'Ext.tab.Panel', //看这里！对就这里，这个值怎么查到的呢，很简单，就是xtype:tabpanel对应的那个名字啦(查官方文档)
4.  
   'Ext.form.field.File'
5.  
   ],

通用方法

查找元素ext.componentquery

1.  
   我这智商，找了好久 orz
2.  
    
3.  
   var myPanel = Ext.ComponentQuery.query('#myPanel');
4.  
   //实际使用过程中，需要写成这样才能真正拿到这个组件
5.  
   myPanel[0]

具体项目

grid相关

表格不要隔行变色，属性竟然藏在这里viewConfig

1.  
   viewConfig: {
2.  
   stripeRows: false
3.  
   }

表格多选行

1.  
   //配置
2.  
   selModel: {
3.  
   selType: 'cellmodel',
4.  
   mode : 'MULTI' //多选
5.  
   }
6.  
   //方法
7.  
   getSelection()

表格中的内容无法选中解决方法

1.  
   这个大腿必须抱啊！[看这里](http://blog.csdn.net/yeshigudu/article/details/48522239)！！救人于水火啊！！！
2.  
    
3.  
   viewConfig: {
4.  
   enableTextSelection: true
5.  
   }

高亮行,

[取消高亮](http://forums.ext.net/showthread.php?868-CLOSED-Clearing-selection-from-a-gridpanel)

反正就是一把辛酸的泪，那些没设置延时的，你们怎么成功实现高亮的！！！
上结果：

1.  
   var urlListTab = Ext.ComponentQuery.query('#urlListTab')[0];
2.  
   setTimeout(function() {urlListTab.getSelectionModel().select(index, false, false)}, 800); //
3.  
   index为行的index值。第一个false时，进入这个grid时，有其他的高亮行时，指定的这行就不亮了，这个就看看，实际用的时候再测测
4.  
   //清除高亮
5.  
   GridPanel1.getSelectionModel().clearSelections //当前高亮全部去除

tab

我只是简单的想隐藏个tab，结果智商是硬伤，官方文档里就有好不好 orz

1.  
   var tabs = Ext.create('Ext.tab.Panel', {
2.  
   width: 400,
3.  
   height: 400,
4.  
   renderTo: document.body,
5.  
   items: [{
6.  
   title: 'Home',
7.  
   html: 'Home',
8.  
   itemId: 'home' // 看这里!!! 是itemId,不是id!!!
9.  
   }, {
10.  
    title: 'Users',
11.  
    html: 'Users',
12.  
    itemId: 'users',
13.  
    hidden: true
14.  
    }, {
15.  
    title: 'Tickets',
16.  
    html: 'Tickets',
17.  
    itemId: 'tickets'
18.  
    }]
19.  
    });
20.  
     
21.  
    Ext.defer(function(){
22.  
    tabs.child('#home').tab.hide();
23.  
    var users = tabs.child('#users');
24.  
    users.tab.show();
25.  
    tabs.setActiveTab(users);
26.  
    }, 1000);

store和storeManager

先吐槽，store的水好深（其实我好想打三个点，但我要忍住）

拿到store

1.  
   Ext.create('Ext.data.Store', {
2.  
   model: 'SomeModel',
3.  
   storeId: 'myStore'
4.  
   });
5.  
   var store = Ext.data.StoreManager.lookup('myStore');//用storeId拿到

用store

1.  
   Ext.create('Ext.data.Store', {
2.  
   model: 'SomeModel',
3.  
   storeId: 'myStore'
4.  
   });
5.  
   Ext.create('Ext.view.View', {
6.  
   store: 'myStore', //用storeId就到手啦，真好
7.  
   // other configuration here
8.  
   });

store具体方法

1.  
   //特别提醒，先要拿到store，说多了都是泪
2.  
   //增加内容
3.  
   myStore.add({some: 'data'}, {some: 'other data'});
4.  
   myStore.insert(index, records); //eg: myStore.insert(0, { "name": "hello", "age": "60"})
5.  
   myStore.find('name', 'hello'); //返回的是序列号，即index
6.  
   myStore.removeAt( index, [count] ) //嘿嘿嘿，拿到序号就可以删除啦

data

field

在这里可以重组field的数据

1.  
   {
2.  
   name: 'firstName',
3.  
   convert: function (value, record) {
4.  
   return record.get('name').split(' ')[0];
5.  
   },
6.  
   depends: [ 'name' ]
7.  
   }

data.model

绑定数据相关，好好看看

ajax相关

我一定要写下来，最后我都把我自己感动了，太不容易了，拿个值。
Ext.ajax

1.  
   Ext.define('ttt', function() {
2.  
   return{
3.  
   getData:function(){
4.  
   var userData;
5.  
   Ext.Ajax.request({
6.  
   async: false,//就是这个地方！要加！不然return出来的是undefined
7.  
   url: 'resources/userinfo.json',
8.  
   success: function(response, opts) {
9.  
   var obj = Ext.decode(response.responseText);
10.  
    console.log('成功')
11.  
    userData = obj;
12.  
    },
13.  
    failure: function(response, opts) {
14.  
    console.log('server-side failure with status code ' + response.status);
15.  
    userData = 'failure'
16.  
    }
17.  
    });
18.  
    return userData;
19.  
    }
20.  
    }
21.  
    })
22.  
    var test = new ttt();
23.  
    var userData = test.getData()
24.  
    //我会说这个userData拿到了要来干嘛吗？
25.  
     
26.  
    //引入
27.  
    viewModel: {
28.  
    data: userData
29.  
    }
30.  
    //使用
31.  
    {
32.  
    xtype:'button',
33.  
    bind: {
34.  
    text: '{username}'//json里面有的字段就可以用啦
35.  
    },
36.  
    }
37.  
     
38.  
    //正常实用款
39.  
    Ext.Ajax.request({
40.  
    url: 'resources/userinfo.json',
41.  
    success: function(response, opts) {
42.  
    var data = Ext.decode(response.responseText);
43.  
    //数据处理动起来
44.  
    },
45.  
    failure: function(response, opts) {
46.  
    console.log('server-side failure with status code ' + response.status)
47.  
    }
48.  
     
49.  
    });
50.  
     
51.  
    //亮点来啦！！ [jsonp](http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.data.proxy.JsonP)
52.  
    proxy: {
53.  
    type: 'jsonp',
54.  
    url : 'http://domainB.com/user',
55.  
    callbackKey: 'callback', //亮点在这里，callback=Ext.data.JsonP.callback1 “callback”此字段名一定要匹配！！！
56.  
    reader: {
57.  
    rootProperty: 'rows',
58.  
    totalProperty: 'resutls'
59.  
    }
60.  
    },

define

我觉得挺实用的，拉出来

1.  
   Ext.define('My.awesome.Class', {
2.  
   someProperty: 'something',
3.  
   someMethod: function(s) {
4.  
   alert(s + this.someProperty);
5.  
   }
6.  
   ...
7.  
   });
8.  
   var obj = new My.awesome.Class();
9.  
   obj.someMethod('Say '); // alerts 'Say something'

base64

1.  
   自带！！！
2.  
    
3.  
   //解码
4.  
   res = Ext.util.Base64.decode(res);