查看: 5134|回复: 1

extjs学习记录

510 主题	2 好友	6309 积分

管理员

Rank: 80

发消息

电梯直达

楼主

发表于 2015-1-20 17:56:57 |只看该作者 |倒序浏览

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里面

=

记录

收藏0

		自动登录	找回密码
密码			立即注册

extjs学习记录

相关帖子

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老