liferay portal集成extjs框架 导致样式冲突不兼容的解决方法

java | 2019-09-13 10:02:39

1.首先说说我是怎么在liferay集成extjs的
我是利用主题皮肤theme引入的
liferay7的话直接把extjs 考到js文件夹里面,记得删除没用的,太大了,然后在portal_normal.ftl模版中引入。src="${javascript_folder}/extjs。这样引入。

我目前用的是liferay6。liferay6会编译extjs的css文件报错,所以直接把extjs拷贝到tomcat的root中的html下。然后还是在自己的主题模版中引入:

<link rel="stylesheet" href="${dir_include}/extjs/build/classic/theme-crisp/resources/theme-crisp-all.css">
        <script type="text/javascript" src="${dir_include}/extjs/build/ext-all.js"></script>

2.解决extjs和liferay aui不兼容。
其实 是liferay aui直接对input和label标签的样式处理覆盖了extjs的样式
所以主要是extjs form表单中的样式问题。
主题样式theme项目的模版中加入

.x-field{
        input{
                margin:0px !important;
                padding:0px !important;
                border:0px !important;
                box-shadow: none !important;
                width: 100% !important;
        }
        label{
                display: table-cell !important;
        }
        
}

把aui添加的样式覆盖掉,当然这里只有对input和label的处理,其他样式的问题也这样处理就可以了。

登录后即可回复 登录 | 注册
    
关注编程学问公众号