asysbang
标题:
extjs学习记录
[打印本页]
作者:
admin
时间:
2015-1-20 17:56
标题:
extjs学习记录
http://mail.gdfi.com.cn/zykdsk
一个extjs做的网站
参考里面的
/example/key-feed-viewer/feed-viewer.html
这个来设计项目的架构
======APP======
首先自己的App.js代码如下
Ext.define('Article.App', {
extend: 'Ext.container.Viewport',
initComponent: function(){
Ext.apply(this, {
layout: {
type: 'border',
padding: 5
},
items: [{title:"xxx"}]
});
this.callParent(arguments);
}
});
然后页面的代码如下
<html>
<head>
<script type="text/javascript" src="<?php echo base_url(); ?>ext/ext-all.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>application/views/article/App.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Article.App();
});
</script>
<meta charset="utf-8">
<title>文章管理</title>
</head>
<body>
</body>
</html>
fit布局是充满父容器,border是分west,east,north,south,center方向,其中center必须有
=========创建left panel 和center panel========================
因为border布局必须有center部分,所以同时创建left和center
先写对应的leftPanel.js,就是一个简单的title加了一个tools
Ext.define('Article.LeftPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.leftpanel',
animCollapse: true,
layout: 'fit',
title: '文章管理',
initComponent: function(){
Ext.apply(this, {
items: [{title:"文章分类",tools: [{
type: 'plus',
callback: function() {
Ext.Msg.alert("提示信息","请您至少选择一个");
}
}]}]
});
this.callParent(arguments);
},
});
CenterPanel.js 里面包含了3个title
Ext.define('Article.CenterPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.centerpanel',
maxTabWidth: 230,
border: false,
initComponent: function() {
this.tabBar = {
border: true
};
Ext.apply(this, {
items: [{title:"centerpanel1"},{title:"centerpanel2"},{title:"centerpanel3"}]
});
this.callParent(arguments);
}
});
App.js中添加函数
createLeftPanel: function(){
this.leftPanel = Ext.create('widget.leftpanel', {
region: 'west',
collapsible: true,
width: 225,
//floatable: false,
split: true,
minWidth: 175
});
return this.leftPanel;
},
createCenterPanel:function(){
this.centerPanel = Ext.create('widget.centerpanel', {
region: 'center',
minWidth: 300
});
return this.centerPanel;
}
然后把
items: [{title:"xxx"}]
换成
items: [this.createLeftPanel(),this.createCenterPanel()]
基本的左右两块就出来了
=======================
页面跳转
location.href='xxxxx.html';
遇到一个问题发现 浏览器的极速模式能显示,但是兼容模式不能显示,
原来是json不规范导致,因为偷懒就用for循环生成的这样最后一个后面还有一个",",这样是不行的必须对count-1 这个特殊处理
==========分页===UI端比较好写,这个是CI框架服务端的代码===
public function show_customers() {
$this->load->model('customer_model');
$start = $_REQUEST["start"];
$limit = $_REQUEST["limit"];
$customers = $this->customer_model->getCustomers($start,$limit);
$all_num = $this->customer_model->countCustomers();
echo "{\"totalCount\":";
echo $all_num;
echo ",";
echo "\"customers\":";
echo json_encode($customers);
echo "}";
}
=========待解决问题============
2个组件用同一个store,但是一个组件是treepanel 领外一个gridpanel
dockedItems
onViewReady
处理事件 可以看看ext.app.controller
extjs的例子中有些js是怎么引用的,simple-tasks这个的html中只引用了一个app.js,怎么看不到引用controller那些js
proxy 是放在model 里面 还是store里面
=
作者:
admin
时间:
2015-1-30 10:28
==========Ext.App.Controller=============
只要定义同样的namespace就可以在controller里面通过get方法得到对应的store和组件
在app里面定义controller,然后在controller的init函数里面关联事件,这样就可以控制了
欢迎光临 asysbang (http://asysbang.com/)
Powered by Discuz! X2.5